0

我有一个手风琴菜单，每个菜单标题都有一个小箭头 img，当菜单向下和向上滑动时会发生变化。

这是到目前为止的代码：

    $(document).ready(function() {
    $("div.menu_body").hide();
    $("#menuheader div.menu_head div.detailsPanel").toggle(function() {
      $(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    },
      function() {

 $(this).removeClass("detailsPanelSelected").parent(this).next("div.menu_body").slideUp("slow");
      }
    );

当我一次切换一个菜单项时，这很好用。

但是假设我展开一个菜单项，然后单击另一个菜单标题。发生的情况是第一个菜单项向上滑动，而新单击的菜单项向下滑动，就像预期的那样。但箭头 gif 不会在向上滑动的菜单上变回。发生这种情况是因为它的切换功能仍处于第一个状态，如果我再次单击它，从而删除“detailsPanelSelected”类，所发生的只是图像变回。查看代码，这是意料之中的。

所以我的问题是，当单击另一个菜单标题时，如何删除菜单项“detailsPanelSelected”？我可以以某种方式重置挂起的切换功能吗？

4

2 回答 2

0

尝试这样的事情：

$("#menuheader div.menu_head div.detailsPanel").toggle(function() {

$(".detailsPanelSelected").each(function(i){ this.removeClass("detailPanelSelected"); })

$(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

}

代码的重要部分是：

$(".detailsPanelSelected").each(function(i){ this.removeClass("detailPanelSelected"); })

它应该放在您添加更改箭头方向的类的代码上方......因此所有元素都回到它们的关闭状态，然后您的下一个函数“打开”正确的

于 2009-05-07T20:15:43.697 回答
0

听起来你可以使用 Slidorion。它是图像滑块和手风琴的组合。检查一下，可能有用：

http://www.slidorion.com

于 2011-10-26T01:21:22.203 回答