0

ドロップダウン メニューを切り替えると、リスト全体が展開されます。選択したリストのみを展開する方法を見つけようとしましたが、問題がどこにあるのかわかりません。

JSFiddle http://jsfiddle.net/Cx4CK/6/

HTML

<ul>
<li><h1>Applications</h1>
    <ul>
    <li>One</li>
    <li>Two</li>
    </ul>
</li>
<li><h1>Forum</h1>
    <ul>
    <li>One</li>
    <li>Two</li>
    </ul>
</li>
<li><h1>Guilds</h1>
    <ul>
    <li>One</li>
    <li>Two</li>
    </ul>
</li>
<li><h1>Imageboards</h1>
    <ul>
    <li>One</li>
    <li>Two</li>
    </ul>
</li>
<li><h1>Projects</h1>
    <ul>
    <li>One</li>
    <li>Two</li>
    </ul>
</li>
</ul>

CSS

.navigation ul li h1 {
    background : #000000;
    border-right : 3px solid #ffffff;
    color : #ffffff;
    display : table;
    float : right;
    font-size : 28px;
    font-weight : 100;
    margin : 0;
    margin-bottom : 3px;
    padding : 6px;
}
.navigation ul li h1:hover {
    border-right : 3px solid #f43058;
    color : #f43058;
}
/* Positioning */
.navigation {
    font-family : 'Open Sans Condensed', sans-serif;
    margin : 12px;
    position : fixed;
    right : 0;
    top : 0;
}
.navigation ul {
    font-size : 20px;
    margin : 0;
    padding : 0;
    text-align : right;
}
.navigation ul li {
    clear : right;
    color : #ffffff;
    float : right;
    list-style-type : none;
}
/* Second Level */
.navigation ul li:hover ul {
    display : block;
}
.navigation ul li ul li {
    background : #000000;
    border-right : 3px solid #ffffff;
    color : #ffffff;
    display : table;
    font-size : 18px;
    margin-bottom : 3px;
    padding : 6px;
}
.navigation ul li ul li:hover {
    border-right : 3px solid #f43058;
    color : #f43058;
}

JQuery

jQuery(document).ready(function () {

    var subMenu = jQuery("ul li ul li");
    var linkClick = jQuery("ul li").filter(":has(ul)");

    subMenu.hide();

    linkClick.click(function (e) {
        e.preventDefault();
        subMenu.fadeToggle("fast");
    });
});
4

1 に答える 1

1

交換することにより

subMenu.fadeToggle("fast");

の

$(this).find('ul li').fadeToggle("fast");

クリックされた要素の子が必要だからです。すべての要素ではありません。

更新されたフィドル：http：//jsfiddle.net/Cx4CK/7/

于 2013-03-04T15:41:35.670 に答える