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

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

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

Answer 2

这样的事情应该这样做

$("#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 3

Jquery切换可能对您有用。为简单起见，我删除了show / hide 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 4

这不起作用。它只会创建另一个会改变胡萝卜的点击，但现在你必须点击两次以显示内容（一次更改胡萝卜，再次显示）。

jquery手风琴菜单状态

4 个答案: