3

私はこのHTMLコードを持っています:

<ul class="navigation-links">
    <li class="link-item">
        <img src="images/new-menu/menu-item_04.png" width="150" height="41" alt="" />
        <div style="display: none" class="sub-menu">
            <div class="sub-col">
                <img src="images/new-menu/home.png" width="46" height="14" alt="" />
                <ul>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </div>
            <div class="sub-col">
                <img src="images/new-menu/home.png" width="46" height="14" alt="" />
                <ul>
                     <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </div>
            <div class="sub-col">
                <img src="images/new-menu/sataer.png" width="124" height="17" alt="" />
                <ul>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
              </ul>
          </div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="link-item">
        <img src="images/new-menu/menu-item_03.png" width="154" height="41" alt="" />
        <div style="display:none" class="sub-menu index-menu-col2">
            <div class="sub-col">
                <img src="images/new-menu/decor.png" width="53" height="15" alt="" />
                <ul>
                  <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
              </ul>
          </div>
            <div class="sub-col">
                <img src="images/new-menu/acc.png" width="94" height="15" alt="" />
                <ul>
                  <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
              </ul>
          </div>
            <div class="sub-col">
                <img src="images/new-menu/out-decor.png" width="120" height="17" alt="" />
                <ul>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
              </ul>
          </div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="link-item">
        <img src="images/new-menu/menu-item_02.png" width="152" height="41" alt="" />
        <div style="display: none" class="sub-menu index-menu-col3">
            <div class="sub-col">
                <img src="images/new-menu/lighting.png" width="35" height="16" alt="" />
                <ul>
                  <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
              </ul>
          </div>
            <div class="sub-col">
                <img src="images/new-menu/electric.png" width="106" height="19" alt="" />
                <ul>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
              </ul>
          </div>
          <div class="clear"></div>
        </div>
    </li>
    <li class="link-item"><img src="images/new-menu/menu-item_01.png" width="151" height="41" alt="" /></li>
</ul>

そしてこの JavaScript コード:

$(document).ready(function(e) {
$(".link-item").hover(function(e) {
    $(this).children(".sub-menu").slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
    $(this).children(".sub-menu").slideUp("fast");
});

Firefox でこのページを開いてこれらのメニューのいずれかを試すと、非常に奇妙な動作をします。とがったメニューは、下にスライドしたり上にスライドしたりします。

デモページ

4

5 に答える 5

1

問題は、関数を 1 つしか指定していないためです。hover()これは、 と の両方で実行されmouseenterますmouseleave。イベントごとに 1 つずつ、2 つの関数を指定する必要があります。これを試して：

$(document).ready(function(e) {
    $(".link-item").hover(
        function(e) { $(this).children(".sub-menu").slideDown("slow"); },
        function(e) { $(this).children(".sub-menu").slideUp("fast"); }
    );
});
于 2012-05-24T21:13:42.530 に答える
1

リンクのすぐ下に「空の」領域があり、メニューが上下に移動しているようです。メニューを上に移動して、空の領域がマウスオーバーされないようにすることができます。これにより、「mouseleave」機能が実行されます。

于 2012-05-24T21:13:52.303 に答える
0

はい、そうです。ホバー関数は 2 つの引数を取ります。1 つは「マウス イン」用、もう 1 つは「マウス アウト」用ですが、マウスをホバーの外に出します。もっとこうやってみて…

$(document).ready(function(e) {
  $(".link-item").hover(function(e) {
    $(this).children(".sub-menu").slideDown("slow");
  },
  function(e) {
    $(this).children(".sub-menu").slideUp("fast");
  })
});
于 2012-05-24T21:11:49.107 に答える
0

試す：

$(document).ready(function(e) {
    $(".link-item").mouseover(function(e) {
        $(this).children(".sub-menu").stop().slideDown("slow");
    }).mouseleave(function(e) {
        $(this).children(".sub-menu").stop().slideUp("fast");
    });
});
于 2012-05-24T21:13:29.150 に答える
0

アニメーション キューの蓄積を防ぐ必要があります。次のようなことを試してください。

$(document).ready(function(e) {
$(".link-item").hover(function(e) {
    $(this).children(".sub-menu").stop().slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
    $(this).children(".sub-menu").stop().slideUp("fast");
});
于 2012-05-24T21:14:02.483 に答える