jquery 手风琴菜单状态

Question

我有一个手风琴菜单，其标题图像会根据状态（打开/关闭）而变化，问题是一旦菜单的任何部分打开，打开状态图像就会保持不变，即使菜单的该部分已关闭。 我希望一旦菜单的该部分关闭，关闭状态就会恢复。

代码

     $(document).ready(function() {
        //slides the element with class "menu_body" when paragraph with class 
        //"sidemenu_head" is clicked 
        $("#firstpane p.sidemenu_head").click(function() {
            $(this).css({backgroundImage:"url(g/down.png)"})
                   .next("div.sidemenu_body")
                   .slideToggle(300)
                   .siblings("div.sidemenu_body")
                   .slideUp("fast");

            $(this).siblings()
                   .css({backgroundImage:"url(left.png)"}); 
    });

Answer 1

那确实行不通。 它只是创建了另一次单击，该单击将更改胡萝卜，但现在您必须单击两次才能显示内容（一次更改胡萝卜，再次显示）。

Answer 2

Jquery 切换可能适合你。 为了简单起见，我删除了显示/隐藏 div，但您可以轻松地将其添加回来：

$(document).ready(function()
{
    $('#firstpane p.sidemenu_head').toggle(
        function()
        {
            $(this).css({ backgroundImage: "url(g/down.png)" });

        }, function()
        {
            $(this).css({ backgroundImage: "url(g/left.png)" });

        });
});

Answer 3

像这样的事情应该可以做到

$("#firstpane p.sidemenu_head").click(function()
{
     if ($(this).css("backgroundImage") == "url(g/down.png)") {
          $(this).css({backgroundImage:"url(g/left.png)"})
     }
     else {
          $(this).css({backgroundImage:"url(g/down.png)"})
     } 
     $(this).next("div.sidemenu_body").slideToggle(300)
          .siblings("div.sidemenu_body").slideUp("fast");
     $(this).siblings().css({backgroundImage:"url(left.png)"}); });
}); 

*修复了缺失的），这应该可以工作。

Answer 4

我建议使用手风琴的 change 事件。 您的处理程序将传递对关闭和打开手风琴项的标题和内容元素的引用。

$('#my-accordion').bind('accordionchange', function(event, ui) {
    ui.oldHeader.css( /* swap bg img */ );
    ui.newHeader.css( /* swap bg img */ );
});