jQuery手風琴菜單活動打開

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外觀，以避免子元素菜單關閉，如果不是頂級菜單，則可以停止該元素的傳播。

參考： 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');
        }
});

工作演示

Answer 4

檢查這個演示小提琴

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