2

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

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

スライドダウンは正常に機能しますが、スライドアップはまったく機能しませんでした。代わりに、.box div を離れると、サブ メニューが突然消えてしまいました。そこで、.box を含む div に 4px のパディングを追加し、左右に 4px を追加しました (これは余裕がある限りです!)。マウスがdivを左または右にゆっくりと離れると、slideUp効果が得られますが、通常の速度でそうすると、まだ上にスライドしません。このページにアクセスして、2 番目のナビゲーション アイテム (「ニュース」) にカーソルを合わせると、私の言いたいことがわかります。

パディングはマウス ポインターが div を離れるのを検出するのに役立ったようですが、slideUp 関数はまだうまく機能していません。nav リストの「ニュース」項目の HTML は次のとおりです。

<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page">
<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 id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page">
    <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

3 に答える 3

2

実際、主な問題は、13 個の CSS ファイルと 30 個の JavaScript ファイルがあることです。そのため、おそらく何が起こっているのかわかりません!

JavaScript を無効にすると、CSS で設定されたホバー効果と JS で設定された別のホバー効果があり、それらが互いに干渉していることがわかります。

CSS ホバー機能を削除して、次のことを試してください。

$j('.box').on('mouseenter mouseleave', function(e) {
    $j('.sub-menu', this).stop(true, true)[e.type==='mouseenter'?'slideDown':'slideUp'](500);
});

$('body').ready...中身がないことに注意してください。それは不要なので、$(function() {...}) instead.

また、30 個の JavaScript ファイルは必要ありません。また、すべての小さな関数を でラップする必要もありません$j(function() {...});。通常は、そのうちの 1 つで十分です。

jQuery を noConflict モードで実行する正当な理由もないようです。人間が可能な限り多くのプラグイン/ファイル/その他 (読み: がらくた) を追加するという繰り返しのテーマのようです。

于 2012-07-16T00:22:04.503 に答える
0

主な問題は、jQueryアニメーションキューをクリアしていないことです。

$j(this).find('.sub-menu')また、グローバル変数に格納する必要があります。

コードは次のとおりです。

var subMenu; /* Global variable */

$j('body').ready(function() {
    $j('.box').hover(function() {
        if(subMenu == null)
        {
            subMenu = $j(this).find('.sub-menu');
        }
        subMenu.stop(); /* Clears animation before applying slideDown */
        subMenu.slideDown(500);
    },
        function() {
            if(subMenu == null)
            {
                subMenu = $j(this).find('.sub-menu');
            }
            subMenu.stop(); /* clears animation before applying slideUp */
            /* you might need to put a 'subMenu.show();' here in case it's not visible */
            subMenu.slideUp(500);
        });
});
于 2012-07-08T23:43:15.183 に答える
0

イベントの要素を確認してください。おそらく要素には、処理するイベントが他にもあります。

于 2012-07-20T13:47:50.393 に答える