jquery从插件分配单击函数

这是一个我正在更新的老项目，所以不是最漂亮的编码

我正在尝试根据我的具体需要调整插件，这个插件是一个简单的可折叠面板插件

我希望能够根据分配给div的rel，为每个面板设置不同颜色的样式

实际上是php代码生成css和div代码，然后我调用jquery应用可折叠面板插件

它的样式一切正常，但单击函数不起作用，任何指针都会非常有用：我想我需要在某个地方应用.delegate（），但不确定如何应用

网址： 要获得测试结果：单击select borough选择器上方的[choose all]，然后单击search按钮

创建面板的代码：

//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?>

//所有这些都包装在一个php循环中：
.C___颜色{
颜色：；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
字母间距：1px；
文本转换：大写；
字体大小：粗体；
}
.可折叠容器{
边框：实心0px；
}
.可折叠集装箱{
光标：指针；
颜色：#000000；
背景色：
}
.可折叠货柜分组{
垫面：5px；
左侧填充：10px；
背景色：；
颜色：#607882；
}
.可折叠容器内容{
填充：10px；
背景色：；
}
click方法调用函数，而不是向函数传递引用。移除（）将触发事件

当前代码：
$（“.collapsableContainertitle”+$（this.attr（“rel”）+”，this）。单击（collapsableContainertitleOnClick（））

固定代码：
$（“.collapsableContainertitle”+$（this.attr（“rel”）+”，this）。单击（collapsableContainertitleOnClick）
 感谢您的回复，我尝试了您建议的代码，但在单击时仍然没有打开/关闭面板。我已在单击中添加了一个console.log，并且在控制台中显示了正确的父级。奇怪的是，为什么它不起作用$（“.collapsableContainerContent”+$（this）.parent（）.parent（）.attr（“rel”）.toggle（）第一个问题是选择器没有找到正确的DOM元素。第二个问题是slideToggle（）不起作用…我不确定是什么问题…但toggle（）起作用。您使用的是较旧版本的jquery 1.3.2…我不知道这是否有区别。您可以尝试升级到1.4.X，看看是否有帮助。你用的是firebug吗？这是我用来追踪bug的工具？
    (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();
}