0

わかった。これが私の基本的な HTML 構造です。

<ul class="tabNavigation">
  <li>
    <a href="#">Main Button</a>

    <div class="hoverTab">
      <a href="#">Link Within Div</a>
    </div>
  </li>
</ul>

そして、ここに私のjQueryコマンドがあります：

$('ul.tabNavigation li').mouseenter(function() {
  $('ul.tabNavigation div.hoverTab').hide();
  $(this).children('div.hoverTab').stop(false, true).fadeIn('fast');
});

$('ul.tabNavigation li').mouseleave(function() {
  $('ul.tabNavigation div.hoverTab').hide();
  $(this).children('div.hoverTab').stop(false, true).show().fadeOut('fast');
});

LI を mouseenter/mouseleave すると、子 div が表示/非表示になるはずですが、問題は hoverTab div 内の A タグが原因でタブがちらつくことです。 ...

助言がありますか？

4

2 に答える 2

0

私はあなたが何を求めているのか完全には理解していません。しかし、起動時にホバータブも非表示にする別の非表示（以下を参照）を追加しました。

私はそれをあなたのmouseenter/leaveバインディングの上に準備ができている私のドキュメントに入れました。私がそれをしたとき、タブはページの読み込み時に表示されず、私がliにカーソルを合わせると、子供はきれいに表示および非表示になりました。

私があなたが何を求めているのか見落としたかどうかはわかりませんが、それは私にとってそれをきれいにしたようです。

$(document).ready(function(){
    $('ul.tabNavigation div.hoverTab').hide();

    $('ul.tabNavigation li').mouseenter(function() {
        $('ul.tabNavigation div.hoverTab').hide();
                            $(this).children('div.hoverTab').stop(false, true).fadeIn('fast');
                });

    $('ul.tabNavigation li').mouseleave(function() {
       $('ul.tabNavigation div.hoverTab').hide();
       $(this).children('div.hoverTab').stop(false, true).show().fadeOut('fast');
            });

    });
于 2010-05-05T16:36:40.360 に答える
0

ああ。私はそれを理解しました...そして、完全なコードを適切に配置する必要がありました。これは次のとおりです。

<ul class="tabNavigation">
  <li>
    <a href="#">Main Button</a>

    <div class="hoverTab">
      <ul>
        <li><a href="#">Link Within Div</a></li>
      </ul>
    </div>
  </li>
</ul>

これがすべての違いを生み出します....私は愚かにもmouseenter/leaveをすべての子LIタグにも割り当てました...

セレクターを次のように変更します。

$('ul.tabNavigation > li')

正常に動作しました...

于 2010-05-05T16:46:04.440 に答える