0

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

在看到几个解决方案并对其进行试验后，最后，我编写了自己的版本（基于来自http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once的 Kevin 的解决方案，但大量修改的）。

jsFiddle 可以在这里找到：http: //jsfiddle.net/3jacu/1/

内联代码：

$(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(); }

奇怪的是，一旦我将右侧的手风琴箭头粘贴到 jsFiddle 中，它就停止工作，而它在我的本地副本中工作。

无论如何，问题是切换没有按预期工作，当它发生时，它会触发重复的切换事件，导致它关闭、打开，然后最终关闭该部分，并且从那时起它不会打开（它切换打开然后关闭）。那是假设它有效！起初，它不会工作，因为它没有响应。我认为我缺少的地方存在逻辑错误。

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

我怀疑这里的问题是我可能错误地假设 jQuery 的切换功能可以很好地在两个功能之间切换，我必须实现我自己的切换代码。如果我错了，请纠正我！

我正在尝试编写代码，使其尽可能高效，因此也将不胜感激。

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

4

3 回答 3

3

您在toggle绑定内部拥有绑定（顺便说一句已弃用）click，因此每次单击标题时都会附加一个新的事件处理程序。

顺便说一句，您还应该在插件中触发事件（您有控制台行会有意义），以便外部代码可以对状态更改做出反应。

于 2012-11-18T03:33:38.300 回答
1

我相信你的问题是$(h4handler).click(function() {你已经包裹了toggle听众。本质上，这样做是为了让每次点击选项卡都会添加切换监听器，然后它也会触发一个事件。删除单击侦听器将具有您期望的行为。

于 2012-11-18T03:35:15.660 回答
1

您忘记粘贴尾随字符);以关闭对 jQuery 函数的函数调用ready。修正： http: //jsfiddle.net/LeZuse/3jacu/2/
更新：我刚刚意识到我并没有真正回答你的问题。
您正在通过绑定另一个 .click 处理程序来复制 .toggle 功能。
关于.toggle的文档说：

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

这意味着点击事件已经内置。
注意：您应该使用局部变量而不是全局变量，这样您的插件就不会污染窗口对象。var为此使用关键字：
var h4handler = $(this).find("h4");

于 2012-11-18T03:31:09.683 回答