Javascript 作为jqueryaccordion的替代品，它爆发了。为什么？

我写了一个jqueryaccordion的替代品，因为它没有提供多个开放部分支持（知道他们为什么选择不包括对它的支持吗？有什么历史吗？）。我在StackOverflow上做了一些研究，也在Google上做了一些研究，看看其他人有什么选择。我需要一些可以在多个元素上即时使用的东西

在看到了几种解决方案并进行了实验之后，最后，我编写了自己的版本（基于Kevin的解决方案，但经过了大量修改）

可以在此处找到JSFIDLE：

内联代码：

$(document).ready(function(){

$.fn.togglepanels = function(){
    return this.each(function(){
        h4handler = $(this).find("h4");
        $(h4handler).prepend('<div class="accordionarrow">&#9660;</div>');
        $(h4handler).click(function() {
            $(h4handler).toggle(
                function() {
                    barclicked = $(this);
                    $(barclicked).find(".accordionarrow").html('&#9658;');
                    $(barclicked).next().slideUp('slow');
                    window.console && console.log('Closed.');
                    return false;
                }, 
                function() {
                    barclicked = $(this);
                    $(barclicked).find(".accordionarrow").html('&#9660;');
                    $(barclicked).next().slideDown('slow');
                    window.console && console.log('Open.');
                    return false;
                }
            );
        });
    });
};

$("#grouplist").togglepanels(); }

$（文档）.ready（函数（）{
$.fn.togglepanels=函数（）{
返回此值。每个（函数（）{
h4handler=$（this.find（“h4”）；
$（h4handler）.prepend（'▼；'）；
$（h4handler）。单击（函数（）{
$（h4handler）.切换(
函数（）{
barclicked=$（此项）；
$（barclicked.find（“.accordioarrow”）.html（“►；”）；
$（单击条）.next（）.slideUp（'slow'）；
window.console&&console.log（'Closed'）；
返回false；
}, 
函数（）{
barclicked=$（此项）；
$（barclicked.find（“.accordioarrow”）.html（“▼；”）；
$（单击条）.next（）.slideDown（'slow'）；
window.console&&console.log（'Open'）；
返回false；
}
);
});
});
};
$（“#组列表”）.togglepanels（）；}

奇怪的是，右侧的手风琴箭头在我将其粘贴到JSFIDLE中时停止工作，而在我的本地副本中工作

在任何情况下，问题在于切换没有按预期工作，当切换按预期工作时，它会触发重复的切换事件，导致它关闭、打开，然后最终关闭该部分，并且从该点起它将不会打开（它切换打开，然后再关闭）.这是假设它能工作的！首先，它不会工作，因为它没有响应。我想我遗漏了一个逻辑错误

根据我在代码中编写/看到的内容，它在给定句柄中搜索相应的标记（在本例中为h4），将句柄弹出到一个变量中。然后在应用AccordionalRow类时将箭头添加到h4标记（将其向右浮动）。然后向其添加一个单击事件，该事件将进行切换（使用jQuery的切换函数）单击h4时在两个功能之间切换

我怀疑这里的问题是，我可能错误地认为jQuery的切换函数可以在两个函数之间切换，我必须实现自己的切换代码。如果我错了，请纠正我

我正在尝试编写代码，以便尽可能地提高效率，因此对此的反馈也将不胜感激

---

提前感谢您的时间、帮助和考虑！

您忘记粘贴尾随字符

）

关闭对jQuery函数的函数调用

ready

。固定：
更新：我刚刚意识到我没有真正回答你的问题。
您正在通过绑定另一个来复制.toggle功能。单击处理程序。
该文件说：

描述：将两个或多个处理程序绑定到匹配的元素，在交替单击时执行

这意味着点击事件已经内置。
注意：你应该使用局部变量而不是全局变量，这样你的插件就不会污染窗口对象。为此使用

var

关键字：

---

var h4handler=$（this.find（“h4”）
您忘记粘贴尾随字符
）
关闭对jQuery函数的函数调用
ready
。固定：

更新：我刚刚意识到我没有真正回答你的问题。

您正在通过绑定另一个来复制.toggle功能。单击处理程序。

该文件说：

描述：将两个或多个处理程序绑定到匹配的元素，在交替单击时执行

这意味着点击事件已经内置。

注意：你应该使用局部变量而不是全局变量，这样你的插件就不会污染窗口对象。为此使用
var
关键字：

var h4handler=$（this.find（“h4”）
您在
单击
绑定中有
切换
绑定（顺便提一下，该绑定已被弃用），因此每次单击标题时都会附加一个新的事件处理程序

作为一个随机的例子，您还应该在插件中触发事件（在这里您有控制台行是有意义的），以便外部代码可以对状态更改做出反应
 在
单击
绑定中有
切换
绑定（顺便提一下，该绑定已被弃用），因此每次单击标题时都会附加一个新的事件处理程序

作为一个随机的例子，您还应该在插件中触发事件（在这里您有控制台行是有意义的），以便外部代码可以对状态更改做出反应
 我相信您的问题是
$（h4handler）。单击（函数（）{
您已经围绕着
切换
侦听器进行了包装。实际上，这样做的目的是，每次单击选项卡都会添加切换侦听器，然后该侦听器也会触发一个事件。删除单击侦听器将具有您期望的行为。
我相信您的问题是
$（h4handler）。单击（函数（）{
您已经围绕着
切换
监听器进行了包装。实际上，这样做的目的是，每次单击选项卡都会添加切换监听器，然后该监听器也会触发一个事件。删除单击监听器将具有您期望的行为。
嘿，您的JSFIDLE缺少最后一个
）
要关闭文档就绪调用，这就是目前没有任何工作的原因。就一般代码样式和效率而言，最好使用现有代码。变量sc