jquery - JQuery スライド関数が正しく動作しない

Question

ドロップダウンメニューを作っているのですが、ドロップ部分に問題があります。ボタンを一度上にするとうまくいきますが、時々狂ってしまい、一度上に行くと何度も下に落ちます。その私のコード...

<script>
  $(document).ready(function() {
  var par = $('#subitem');
  $(par).hide();
  $('#barbox').mouseover(function(a) {
      $(par).slideToggle(300);
      a.preventDefault();
  });
  $(par).mouseleave(function(a) {
      $(par).slideToggle(300);
  });
});
</script>

私のサイトで問題を確認できます。サービス タブに移動して、そこでマウスを動かしてみてください。

Answer 1

アニメーションがおかしくなるのは、Jquery のアニメーション キューが原因です。

次のように、slideToggle イベントを実行する前にキューを停止します。

<script>
  $(document).ready(function() {
  var par = $('#subitem');
  $(par).hide();
  $('#barbox').mouseover(function(a) {
      $(par)
.stop(true, true).slideToggle(300);
      a.preventDefault();
  });
  $(par).mouseleave(function(a) {
      $(par)
.stop(true, true).slideToggle(300);
  });
});
</script>

詳細については、このリンクをチェックしてください: http://api.jquery.com/stop/

Answer 2

次のように、すべてのイベントを同じ関数に入れてみてください。

$('#subitem').mouseenter(function(){
      $('#subitem').slideToggle(300);
      a.preventDefault();
    }).mouseleave(function(){
      $('#subitem').slideToggle(300);
    });

Answer 3

最初に HTML を修正する必要があります。テーブルの各 td で同じ ID を使用します。リンクについても同様です。ID は一意であるため、代わりにクラスを使用する必要があります。