2

表示/非表示メニューを作成しました。これはうまくいきます。ただし、デフォルトではメニューは閉じています。これも、ページに移動するまでは問題ありません。

ページが「アクティブ」のクラスで構築されたアンカーに移動すると、「アクティブ」がメニューに存在するかどうかを確認し、それに基づいてそのブロックを表示します。したがって、少なくとも1つのメニューが常に開いています。

私の現在のjQueryは次のとおりです：

    $('.sub_menu').hide();
$('.clickable').toggle(function(){
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px -12px');
}, function()
{
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px 5px');       
});

if ($('ul.sub_menu li a').hasClass('active')) {
    $(this).css('display','block');
}

jsFiddleも作成しました

したがって、ul.sub_menu li a = activeであるかどうか、およびsub_menuが表示されているかどうかをターゲットにしています。

しかし、それで運がない。前もって感謝します

4

5 に答える 5

3 
$('.sub_menu').hide();
$('.clickable').toggle(function(){
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px -12px');
}, function()
{
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px 5px');        
});

if ($('ul.sub_menu li a').hasClass('active')) {

    $('.sub_menu').css('display','block');
}

これは、sub_menu..elseが1つしかない場合にのみ機能します。$(this).parent().parent().css()

于 2012-10-22T11:44:09.477 に答える
3

display:noneあなたから削除するだけul.sub_menuで、簡単に行うことができます

$('ul.sub_menu li a:not(.active)').css('display', 'none');

デモ

于 2012-10-22T11:48:45.753 に答える
1

this最後のifブロックのは、あなたが参照していると思うものを参照していないことに注意してください。また、リストアイテムとリンクを表示するには、含むを表示する必要がありますul。これを試してください：

$('.sub_menu').hide();
$('.clickable').toggle(function(){
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px -12px');
}, function() {
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px 5px');        
});

$('.active').css('display','block');

また、もに設定してulくださいactive。

activeちなみに、でクラスを管理したくない場合は、これを追加して、 ：を持つ子を含むものulを自動的に表示します。.sub_menu.active

$('.active').closest('.sub_menu').css('display','block');

フィドルを更新しました。

于 2012-10-22T11:39:30.803 に答える
1

子の1人がクラスをアクティブにしている場合は、リストを表示する必要があります。

$('ul.sub_menu li a.active').parents('ul').show(); // This would replace your if statement

コードは次のことを行います。1。クラスがアクティブなすべてのリンクを選択します。2.リンクが子であるリスト要素を見つけます。3.リストを表示します。

完全な例：デモ

于 2012-10-22T11:45:26.330 に答える
1

これに対する最も簡単なアプローチは、ul.sub_menuにa.activeが含まれているかどうかを確認することです。その場合は、display：blockを設定します。これは、次のコードで実行できます。

$('.sub_menu').hide();
$('.clickable').toggle(function (){
    $(this).next('ul').slideToggle();
    $(this).css('background-position', '0px -12px');
}, function (){
        $(this).next('ul').slideToggle();
        $(this).css('background-position', '0px 5px');
});

$('ul.sub_menu').has('a.active').css('display', 'block');
于 2012-10-22T12:07:45.423 に答える