2

このメニューをご覧ください: http://maxim.comze.com

3番目のボタンはスライドパネルを開き、パネルを閉じます。すでに開いている場合は、他のボタンでもパネルを閉じてください。これは add acitem および if/else ステートメントと関係があることは知っていますが、それらの経験はありません。とても有難い。

これはメニューコードです：

$('li hometog, li jredtog, li servicestog',this).click(function(e){       
    e.stopImmediatePropagation();
    var theElement=$(this).next();
    var parent=this.parentNode.parentNode;

    if($(parent).hasClass('noaccordion')){
        if(theElement[0]===undefined){window.location.href=this.href}
        $(theElement).slideToggle('normal',function(){
            if($(this).is(':visible')){
            $(this).prev().addClass('active')
    }else{
        $(this).prev().removeClass('active')}});
        return false
    }else{
        if(theElement.hasClass('acitem')
        &&theElement.is(':visible')){if($(parent).hasClass('collapsible')){
           $('.acitem:visible',parent).first().slideUp('normal',function(){
               $(this).prev().removeClass('active')
           });
           return false
        }
    return false
    }

    if(theElement.hasClass('acitem')&&!theElement.is(':visible')){
          $('.acitem:visible',parent).first().slideUp('normal',function(){
               $(this).prev().removeClass('active')});

               theElement.slideDown('normal',function(){
                    $(this).prev().addClass('active')});

                     return false}
    }
}) 
})
};

これは 3 番目のボタンのコードです。

$("servicestog").click(function(){
    $(".panel").toggle("slide",{direction: "right"},500);
    $(this).prev().addClass('active')
    return false;
});
4

2 に答える 2

1

の最も簡単な解決策は、他のメニュー項目の1つをクリックすると呼び出される別の関数を使用することです。この関数は、サイドパネルが表示されている場合は非表示にします。したがって、これを追加します。

// When clicking on 'hometog' or 'jredtog'
$('li hometog, li jredtog', this).click(function (e) {
    // if the panel is visible, hide it
    $('.panel:visible').hide("slide", { direction: "right" }, 500);
});

既存のクリックハンドラーの上：

$('li hometog, li jredtog, li servicestog', this).click(function (e) {

後の振る舞いをします。

現時点でクリックハンドラーが構築されている方法の問題は、メニュー項目（ドロップダウンをアクティブにするものとパネルをアクティブ/非表示にするもの）のいずれかをクリックするたびに起動することです。つまり、ハンドラーのある時点で、クリックハンドラーをトリガーした要素がパネルを表示した要素であるかどうかを判断する必要があります。これにより、パネルを非表示にする必要があるかどうかを判断できます。

これは、（分岐ロジックの前に）既存のハンドラーに次のようなものを追加することで実行できます。

if (!$(this).is('servicestog')) {
    $('.panel:visible').hide("slide", { direction: "right" }, 500);
}

activatesPanel別の方法は、パネルをアクティブにするメニュー項目に別のクラスを追加することです。

<servicestog class="activatesPanel">Menu 3</servicestog>

次に、既存のハンドラーで次のようなことを行うことができます。

if (!$(this).hasClass('activatesPanel')) {
    $('.panel:visible').hide("slide", { direction: "right" }, 500);
}

acitemとクラスを使用して同様のことを行おうとするロジックがあるようですがactive、このロジックがどのように機能するかは明確ではなく、パネルで少し落ちているようです。

于 2012-06-19T12:51:45.503 に答える
0

多分これはあなたのためのトリックを行いますか？

$('li hometog, li jredtog, li servicestog',this).click(function(e){       
e.stopImmediatePropagation();
var theElement=$(this).next();
var parent=this.parentNode.parentNode;

if($(parent).hasClass('noaccordion')){
    if(theElement[0]===undefined){window.location.href=this.href}
    $(theElement).slideToggle('normal',function(){
        if($(this).is(':visible')){
        $(this).prev().addClass('active')
} else if(theElement.hasClass('acitem')&&theElement.is(':visible')){
       if($(parent).hasClass('collapsible')){
       $('.acitem:visible',parent).first().slideUp('normal',function(){
           $(this).prev().removeClass('active')
       });
       return false
    }
return false
}else{
    $(this).prev().removeClass('active')}});
    return false
}

if(theElement.hasClass('acitem')&&!theElement.is(':visible')){
      $('.acitem:visible',parent).first().slideUp('normal',function(){
           $(this).prev().removeClass('active')});

           theElement.slideDown('normal',function(){
                $(this).prev().addClass('active')});

                 return false}
}
}) 
})
};
于 2012-06-19T09:15:37.303 に答える