3

ナビゲーション バーのサブ メニューのスライド ダウンを処理する次のホバー スクリプトがあります。

$j('body').ready(function() {
    $j('.menu-item').hover(function() {
        $j(this).find('.sub-menu').slideDown("slow");
    },
        function() {
            $j(this).find('.sub-menu').slideUp("slow");
        });
});

現時点では、予想どおり、ユーザーが .menu-item div にカーソルを合わせるたびに、スライド ダウンがアクティブになります。ただし、ユーザーが.menu-item div、つまり.bottom_navに含まれる子divにカーソルを合わせたときにのみ、スライドダウンがアクティブになるようにしたいと思います。

HTML の形式は次のとおりです。

<li class="menu-item">
<div class="box">
    <div class="top_nav">
    </div>
    <div class="clear">
        <div class="bottom_nav">
            <div class="left_nav">
            </div>
            <div class="center_nav">
                <a href="http://soteriabrighton.co.uk/news/">news</a>
            </div>
            <div class="right_nav">
            </div>
            </a>
        </div>
    </div>
    <ul class="sub-menu">
        <li>
        <div class="box">
            <div class="top_nav">
            </div>
            <div class="clear">
                <div class="bottom_nav">
                    <div class="left_nav">
                    </div>
                    <div class="center_nav">
                        <a href="http://soteriabrighton.co.uk/news/events/">events</a>
                    </div>
                    <div class="right_nav">
                    </div>
                    </a>
                </div>
            </div>
            </li>
        </ul>
        </li>

このページ、特にイベント ページのドロップダウンがある「ニュース」アイテムで、ナビゲーション アイテムの動作を確認できます。サイトは開発中のため、次の資格情報を入力する必要があります。

ユーザー名:ゲスト

パスワード：スタックオーバーフロー

4

2 に答える 2

2

以下を追加して、これをソートしました。

$j('.sub-menu').hover(function() {
    $j(this).stop().slideDown("fast");
}, function() {
    $j(this).stop().slideUp("slow");
});
于 2012-07-14T18:49:01.320 に答える
1

あなたがしなければならないことは、セレクターを修正して特定のものを指定しdiv、メソッド内でhover()DOM を要素に戻し、そこでアニメーション化.menu-itemする要素を見つけることです。.bottom_nav

$j('.menu-item .bottom_nav').hover(function() {
    $j(this).closest('.menu-item').find('.sub-menu').slideDown("slow");
},
function() {
    $j(this).closest('.menu-item').find('.sub-menu').slideUp("slow");
});

これは、親内で見つかっhover()た要素にのみメソッドを適用します。.bottom_nav.menu-item

参考文献:

于 2012-07-08T18:44:41.067 に答える