从jquery的插件

Question

这是我更新使旧项目分配点击功能不编码的日最漂亮的。

我试图适应我特定需求的插件，有问题的插件是一个简单的colapsible面板插件。

我希望能够给每一个样式面板采用了不同的颜色取决于被分配到div的相对。

其产生的CSS和股利的代码实际上PHP代码，我然后调用jQuery的应用可折叠面板插件。

它风格一切正常，但点击功能不起作用，任何指针将是最有帮助的：我想我需要应用.delegate（）某处，但不知道如何。

的网址：http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_rework.php 要获得测试结果：单击[选择全部]选择市镇选择器的上方，然后点击搜索按钮。

创建该面板的代码：

//all this is wrapped in a php loop: 
<style type="text/css"> 
      .C_<?php echo $myCurrentBorough ?>_color{ 
       color:<?php echo $row_rs_myBoroughs['color']; ?>; 
       font-family: Arial, Helvetica, sans-serif; 
       font-size:12px; 
       letter-spacing:1px; 
       text-transform:uppercase; 
       font-weight: bold; 
      } 
      .collapsibleContainer<?php echo $myCurrentBorough ?>{ 
        border: solid 0px <?php echo $row_rs_myBoroughs['color']; ?>; 
       } 

       .collapsibleContainerTitle<?php echo $myCurrentBorough ?>{ 
        cursor:pointer; 
        color:#000000; 
        background-color:<?php echo $row_rs_myBoroughs['color']; ?> 
       } 

       .collapsibleContainerTitle div<?php echo $myCurrentBorough ?>{ 
        padding-top:5px; 
        padding-left:10px; 
        background-color:<?php echo $row_rs_myBoroughs['color']; ?>; 
        color:#607882; 
       } 

       .collapsibleContainerContent<?php echo $myCurrentBorough ?>{ 
        padding: 10px; 
        background-color:<?php echo $row_rs_myBoroughs['color']; ?>; 
       } 

     </style> 
     <?php if($boroughCounter > 0){?> 

      <div class="collapsibleContainer<?php echo $myCurrentBorough; ?>" tabindex="<?php echo $myCurrentBorough; ?>" title="Locations Found In <?php echo $row_rs_myBoroughs['Borough_Name']; ?>" rel="<?php echo $myCurrentBorough; ?>"> 
      MY DIV CONTENT GOES HERE 
       </div> 
       <script type="text/javascript"> 
         $(document).ready(function() { 
          $(".collapsibleContainer<?php echo $myCurrentBorough; ?>").collapsiblePanel(); 
         }); 
        </script> 
        <?php } //end check to see if locations exist in borough?> 

的jquery插件：

(function($) { 
    $.fn.extend({ 
     collapsiblePanel: function() { 
      // Call the ConfigureCollapsiblePanel function for the selected element 
      return $(this).each(ConfigureCollapsiblePanel); 
     } 
    }); 

})(jQuery); 

function ConfigureCollapsiblePanel() { 
    $(this).addClass("ui-widget"); 
    // Wrap the contents of the container within a new div. 
    $(this).children().wrapAll("<div class='collapsibleContainerContent"+$(this).attr("rel")+" ui-widget-content' rel='"+$(this).attr("rel")+"'></div>"); 

    // Create a new div as the first item within the container. Put the title of the panel in here. 
    $("<div class='collapsibleContainerTitle"+$(this).attr("rel")+" ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this)); 

    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div. 
    $(".collapsibleContainerTitle"+$(this).attr("rel")+"", this).click(CollapsibleContainerTitleOnClick()); 
} 

function CollapsibleContainerTitleOnClick(myID) { 
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it. 
    $(".collapsibleContainerContent"+$(this).attr("rel")+"", $(this).parent()).slideToggle(); 
} 

Answer 1

的点击方法调用的功能，而不是传递一个参考给该函数。删除（）并触发事件。

当前代码： $（ “collapsibleContainerTitle ”+ $（本）.attr（“ 相对 ”）+“”，这一点）。点击（CollapsibleContainerTitleOnClick （））; （CollapsibleContainerTitle）+ $（this）.attr（“rel”）+“”，this）.click（CollapsibleContainerTitleOnClick）;