0

次のようなネストされたhtml構造があります。

<ul class="root">
    <li>Foo 1 <label class="bar-class">bar</label>
         <ul>
            <li>Foo 2 <label class="bar-class">bar</label>

            </li>

            <li>Foo 3 <label class="bar-class">bar</label>

            </li>
        </ul>
    </li>
</ul>

など、サイト マップなので、ネスティングは好きなだけ深くすることができます。

bar labelのホバーを表示および非表示にしようとしていli elementます。

次のようなコードで:

 $('.root li').live({
                mouseenter:
                       function () {
                           $(this).find('>.bar-class').show('slow');
                       },
                mouseleave:
                       function () {
                           $(this).find('>.bar-class').hide('fast');
                       }
            });

問題は、現在のすべてliの親にもその が表示barされることです。現在のアイテムのバーのみが選択されるように選択するにはどうすればよいですか?

バリエーションを試しましたが、まだクラックしていません。

ありがとう。

編集 1: html タグを修正しました。

4

2 に答える 2

3

falseコールバック関数から戻って、DOM ツリーの上方へのイベントの伝播を停止できます。

また、 and を使用するように変更しmouseoverますmouseout。

$('.bar-class').hide();

$('.root li').live({
  mouseover:
    function () { $(this).find('>.bar-class').show('slow'); return false; },
  mouseout:
    function () { $(this).find('>.bar-class').hide('fast'); return false; }
});​

この時点で、 using から using に変換することをお勧めliveしon()ますlive。

この場合、コードは次のようになります。

$('.root').on('mouseover mouseout', 'li', function () {
  $(this).children('.bar-class').stop(true, true).fadeToggle('slow');
  return false;
});​

ヨシへの参照のおかげ：http://jsfiddle.net/6FzWU/2/

于 2012-09-04T10:28:41.227 に答える
0

を使用e.preventDefault()し、.live非推奨になりました。.on

$(document).on({
  mouseenter: function (e) {
    e.preventDefault();
    $(this).children('.bar-class').show('slow');
  },

  mouseleave: function (e) {
    e.preventDefault();
    $(this).children('.bar-class').hide('fast');
  }
}, '.root li');
于 2012-09-04T10:31:12.707 に答える