Question

我有一个ccordion菜单，每个菜单标题都有一个小箭头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”？我可以以某种方式重置挂起的切换功能吗？

Answer 1

尝试这样的事情：

$（“＃menuheader div.menu_head div.detailsPanel”）。toggle（function（）{

$（ “detailsPanelSelected”）。每个（函数（I）{ this.removeClass（ “detailPanelSelected”）; }）

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

}

代码的重要部分是：

$（ “detailsPanelSelected”）。每个（函数（I）{ this.removeClass（ “detailPanelSelected”）; }）

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

Answer 2

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

http://www.slidorion.com

切换手风琴菜单时更改bg图像

2 个答案: