Question

我有一个工作的jquery手风琴菜单。有一件事仍然不会成功。当我打开菜单并单击链接时，菜单再次关闭。我希望菜单保持打开状态，只有在打开另一个菜单时才会关闭。

抱歉我的英文。 Jquery代码

$(document).ready(function(){
          $('.item').click(function(){
                if($(this).css('max-height') == '37px') {
                    $(this).css('max-height','240px')
                }else {
                      $(this).css('max-height','37px')
                }
          });
    });

我希望有人可以帮助我。

这里是html和css的jsfiddle：http://jsfiddle.net/aAn8n/

Answer 1

试试这个：

$(document).ready(function(){
              $('.item').click(function(){
                    if($(this).css('max-height') == '24px') {
                        $(this).css('max-height','240px')
                    }else {
                          $(this).css('max-height','24px')
                    }
              });
    $('[href^="#"]').click(function(e){
     e.stopPropagation();// this will stop propagation of click event to its parent
     // and hence it will not fire click event for div with class=item
    });
        });

JSFiddle

Answer 2

您可以使用类并在单击时切换它，而不是操纵css Appereance，以避免子元素菜单关闭，如果元素不是顶级菜单，则可以停止元素的传播。

参考：toggleClass，removeClass，not

的CSS：

#accordion .item.opened {
    max-height: 240px;
}

代码：

$(document).ready(function () {

    $('.item').click(function () {
        $('.item').not($(this)).removeClass("opened");
        $(this).toggleClass("opened");
    });

    $('.item a:not(.kop)').click(function (e) {
        e.stopPropagation();
    })

});

演示：http://jsfiddle.net/IrvinDominin/8Jt4G/

Answer 3

试试这个

$('.kop').click(function(){
        var $parent = $(this).parent(".item");

        if($parent.css('max-height') == '24px') {
            $(".item").css('max-height','24px');
            $parent.css('max-height','240px');
        }else {
            $parent.css('max-height','24px');
        }
});

正在使用 DEMO

Answer 4

选中 Demo Fiddle

$('a[href^="#"]').click(function(e){
    e.stopPropagation();
});

Jquery手风琴菜单主动打开

4 个答案: