0


マウスを div の上にslide置くと、slide_paneldiv が表示されます。

ただし、マウスがslidediv を出て のコンテンツ上にあるslide_panel場合、パネルは表示されたままになりません。

では、パネルが最初に表示されたら、トグルされたパネルをどのように表示したままにしmouseoverますか?

HTML:

<div class = "slide">category:</div>
<div class = "slide_panel">
     <a href = "#" title = "">asdf</a><br />
     <a href = "#" title = "">qwerty</a><br />
</div>

<div class = "slide">another category:</div>
<div class = "slide_panel">
     <a href = "#" title = "">another asdf</a><br />
     <a href = "#" title = "">another qwerty</a><br />
</div>


jQuery:

$(".slide").mouseover(function() {
    $(this).next(".slide_panel").slideToggle();

}).mouseout(function() {
    $(this).next(".slide_panel").slideToggle();
});


編集： 基本的にドロップダウンメニューのように動作するように、 で消え
ます。slide_panelmouseout

4

3 に答える 3

3

サブメニューをメイン メニューの下にラップできる場合は、この問題を回避できます。

HTML

<div class="slide">category:
    <div class="slide_panel"> <a href="#" title="">asdf</a>
        <br /> <a href="#" title="">qwerty</a>
        <br />
    </div>
</div>
<div class="slide">another category:
    <div class="slide_panel"> <a href="#" title="">another asdf</a>
        <br /> <a href="#" title="">another qwerty</a>
        <br />
    </div>
</div>

JS

 $(".slide").on('mouseenter mouseleave', function () {
    $(this).find(".slide_panel").stop().slideToggle();

});

デモ

于 2013-06-10T02:11:01.577 に答える
1

このフィドルを試してください

JS:

$(".slide").mouseover(function () {
    $(".slide_panel").stop(true, true);
    $(".slide_panel").hide(0);
    $($(this).next(".slide_panel")[0]).slideToggle();

}).mouseout(function () {
    $(".slide_panel:visible").slideToggle();
});

CSS

.slide_panel {
  display: none;
}

アップデート

Mouseout ハンドル イベントが更新されました。フィドルも更新しました。

$(".slide").mouseout(function () {
    $(this).find(".slide_panel").stop().slideToggle();
});
于 2013-06-10T02:33:08.227 に答える
1

を2回発射してslideToggleいるため、マウスオーバーで開き、マウスアウトで閉じます。mouseover私がよくわからない2つの状態がない限り、マウスアウトで何もしないと、開いたままになります。

于 2013-06-10T02:11:31.473 に答える