2

メニューをホバーするとサブメニューを表示しようとしています。サブメニュー レベル 1 では成功しましたが、サブメニュー レベル 2 (つまり、サブメニューのサブメニュー) に移動すると機能しません。レベル 1 サブメニューをホバリングしたときにのみレベル 2 サブメニューを表示したい。以下は私が試したコードです

<ul class="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Us</a>
        <ul class="submenu">
            <li><a href="#">Capabilities</a></li>
            <li><a href="#">Approach</a></li>
        </ul>
    </li>

    <li><a href="#">Careers</a>
        <ul class="submenu">
            <li><a href="#">Working With Us</a></li>
            <li><a href="#">Work Culture</a>
                <ul>
                    <li><a href="#">Benefits</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Resources</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
</ul>

以下はjQueryです

$('ul.submenu').hide();
$('ul.nav > li').hover(function () {
if ($(this).find('ul.submenu').length > 0) {
    $(this).find('ul.submenu').stop().slideDown('slow');
}
},function () {
    if ($(this).find('ul.submenu').length > 0) {
        $(this).find('ul.submenu').stop().slideUp('slow');
    }
});

ここでフィドルを見つけてください：http://jsfiddle.net/Midhun28/RbY83/1/

4

3 に答える 3

6

私が理解している限り、リスト項目を1レベル上に置くとサブメニューをスライドダウンしたい

<ul class="submenu">
    <li><a href="#">Working With Us</a></li>
    <li><a href="#">Work Culture</a>
        <ul class="submenu">
            <li><a href="#">Benefits</a></li>
        </ul>
    </li>
</ul>

最初は非表示にしたいすべての要素にサブメニュー クラスを追加しました。次に、すべてのサブメニューで動作するようにjqueryコードにいくつかの変更を加えました

$('ul.submenu').hide();
$('ul.nav > li, ul.submenu > li').hover(function () {
if ($('> ul.submenu',this).length > 0) {
    $('> ul.submenu',this).stop().slideDown('slow');
}
},function () {
    if ($('> ul.submenu',this).length > 0) {
        $('> ul.submenu',this).stop().slideUp('slow');
    }
});

これがうまくいくことを願っていますhttp://jsfiddle.net/U7mqM/

于 2013-10-16T06:04:04.230 に答える
3

サブ要素にカーソルを合わせたときにトリガーされるようにするには、 mouseenterおよびmouseleaveイベントを使用します。

$('.nav ul').hide();

$('.nav li').mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow')
}).mouseleave(function() {
    $(this).children('ul').stop().slideUp('slow')
});
于 2013-10-16T05:51:16.770 に答える