3

単純なマルチレベルのドロップダウンボックスをモックアップしていますが、aがホバーされたときにホバーイベントを1回だけ発生させる方法がわかりませんli。alist-item内のタグがホバーされると、ホバーイベントが2回発生します。

これが問題を示すjsFiddleです。aイベントが2回発生する方法を示すために、タグの周囲に追加のパディングを追加しました。パディングだけをホバーすると、イベントは1回発生しますが、aタグをホバーすると、再び発生します。

HTML：

<ul class="dropit">
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a>
      <ul>
        <li><a href="#">Sub-thing 1</a></li>
        <li><a href="#">Sub-thing 2</a>
           <ul class='sub-menu'>
            <li><a href="#">Sub-sub-thing 1</a></li>
            <li><a href="#">Sub-sub-thing 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

jQuery：

$(document).ready(function(e) {
    $('ul.dropit li').on('mouseover', function(event) {
        $target = $(event.currentTarget);
        $sub = $target.children('ul').first();
        $sub.slideToggle();
    }).on('mouseout', function(event) {
        $target = $(event.currentTarget);
        $target.children('ul').first().slideToggle();
    });
});

jsFiddleデモンストレーション

4

2 に答える 2

9

mouseenterandmouseleaveの代わりにmouseoverandを使用するmouseout

フィドル

$(document).ready(function(e) {
    $('ul.dropit li').on('mouseenter', function(event) {
        $target = $(event.currentTarget);
        $sub = $target.children('ul').first();
        $sub.slideToggle();
    }).on('mouseleave', function(event) {
        $target = $(event.currentTarget);
        $target.children('ul').first().slideToggle();
    });
});​

mouseover子要素にカーソルを合わせると起動します。

mouseenter何人の子供がホバリングされても、一度だけ発火します。

于 2012-07-16T19:29:19.027 に答える
5

jsFiddleデモ

使用するだけ.hover()

さらに、ホバーの繰り返し動作での醜いスライドの蓄積を防ぐために、次を使用します。.stop()

$('.dropit li:has("ul")').hover(function() {
    $('>ul', this).stop().slideToggle();
});
于 2012-07-16T19:34:45.357 に答える