1

LI アイテムをクリックすると左にスライドする順序付けられていないリストを含む div があります。

<div id="products">
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li>
</ul>

問題は、リスト項目をクリックすると、div が左にスライドし、マウス カーソルの下にスライドすると、すべてのリスト項目でロールオーバー アニメーションがトリガーされることです。

アイテムのオンクリックでJavaScriptを無効にする方法はありますか?

私はこれを試しました：

$("#products li a").click(function(event){
event.preventDefault();
});
}

しかし、ホバー時にアニメーションがまだ他のリスト項目で継続しているため、それは機能していないようです?

4

2 に答える 2

1

クリックイベントで、リストアイテムからホバーイベントのバインドを解除できます。

$("#products li a").click(function(){
    $("#products").find('li').unbind('mouseenter');
});

このコードは、(mouseover イベントではなく) mouseenter イベントにバインドしていることを前提としています。

アニメーションの呼び出しでコールバック関数を使用したい場合は、アニメーションの完了後にホバー イベント ハンドラーをリスト項目に再適用できます。

$("#products").animate({left: '-=100px'}, function () {
    $("#products").find('li').bind('mouseenter', function () {
        //add hover code here
    });
});
于 2011-08-18T22:24:19.383 に答える
0

グローバル スコープの変数をtrueonclick に設定し、onmouseover で全体をif (!varSetOnClick) {?でラップすることができます。最も優雅な解決策ではありませんが、うまくいくでしょう...

于 2011-08-18T22:18:59.683 に答える