1

スライドダウンのオプションを使用してスライドダウンメニューを実行しています。

次のjQueryを使用しています

$(document).ready(function() {
    $(".menu_item").hover(function() {
        $(".menu_options").slideDown(400);
    }, function() {
        $(".menu_options").slideUp(400);
    });
});

私が抱えている問題は、それが下にスライドして、下にスライドしたdivに進むと消えることです-これがセットアップのスクリーンショットです

スクリーンショット

このエリアの HTML は

<div class="menu">
            <div class="menu_item" id="1">
                Landlord Packages
            </div>
            <div class="spacer"></div>
            <div class="menu_item">
                Single Items
            </div>
            <div class="menu_options" id="1"></div>
        </div>

よろしくお願いします:-)

JSFiddle スクリプトhttp://jsfiddle.net/pCTXq/

4

3 に答える 3

2

試す

$(document).ready(function() {
    $(".menu_item, .menu_options").hover(function() {
        $(".menu_options").stop(true, true).slideDown(400);
    }, function() {
        $(".menu_options").stop(true, true).delay(10).slideUp(400);
    });
});

これはあなたが必要とすることをするはずです。

私のフィドル: http://jsfiddle.net/MCvsd/54/

編集:提供したフィドル、更新: http://jsfiddle.net/pCTXq/1/

于 2013-04-23T14:11:32.943 に答える
0

ここでの問題は、ホバー.menu_itemがスライド.menu_optionsダウンするのを見ていることですが、.menu_optionsは の外にある.menu_itemため、マウスを に移動する.menu_optionsと非表示になります。

.menu_optionsこれは、各.menu_itemdiv内にネストすることで解決できます。これをトラブルシューティングするには、JSfiddle または codepen (CSS を使用) を使用するとよいでしょう。 

<div class="menu">

  <div class="menu_item" id="1">
      Landlord Packages
  </div>

  <div class="spacer"></div>

  <div class="menu_item">
      Single Items
     <div class="menu_options" id="1"></div>
  </div>
</div>
于 2013-04-23T14:11:12.217 に答える
0

ネストは方法ですが、それでもネストを使用したくない場合は、次のようにすることができます

$(document).ready(function() {
    $(".menu_item").hover(function() {
        $(".menu_options").slideDown(400);
    });
    $(".menu_options").mouseleave(function () {
        $(".menu_options").slideUp(400);
    });
});
于 2013-04-23T14:16:13.833 に答える