0

私は簡単なことを成し遂げようとしています。ネストされたULを含む2レベルのメニューがあります。内部ULはdisplay：noneとして設定されているため、メインカテゴリのみが表示されます。メインカテゴリでのデフォルトのonclick動作を防ぎ、それぞれの内部ULを脇に置いておきたいと思います。

私のhtmlはこれです：

<nav id="type-navigation">
    <ul id="nav_categories" class="subs">
        <li><a href="#">Category 1</a>
                <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                </ul>
        </li>
        <li><a href="#">Category 2</a>
                <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                </ul>
        </li>
</ul>
</nav>

Jqueryを使用してこれを実行したいと思います。最初のカテゴリをクリックすると、その子のULがFadeInと一緒に表示されます。別のカテゴリをクリックすると、前に表示されたULがFadeOutになり、他のカテゴリのULがFadeInになります。

これは私のJqueryであり、期待どおりに機能していません。

$("ul li a").toggle(function() { 
                  $(this).children("ul").fadeIn("slow");
                  },
                   function() { 
                 $(this).children("ul").fadeOut("slow"); 
                });
4

2 に答える 2

2

<ul>あなたの隣<a>がcssで隠されていると仮定しますdisplay:none：

$(".subs > li > a").click(function() {
    $(this).parents('.subs').find('ul').hide();
    if($(this).next("ul").is(":visible")) {
            $(this).next("ul").fadeOut("slow");
    }    else {
        $(this).next("ul").fadeIn("slow");
    }
    return false;
});
于 2012-06-08T08:11:44.050 に答える
2

この例を試してください。

例からのCSS：

nav > ul > li > ul {
 display:none;   
}​

例からのjQuery：

$( 'ul#nav_categories > li > a' ).click( function(e) {
    e.preventDefault();
    theClickedLi = $( this );
    $( '#nav_categories' ).find( 'ul' ).fadeOut();
    theClickedLi.parent('li').find( 'ul' ).fadeIn();
} );

お役に立てれば。

于 2012-06-08T08:17:43.813 に答える