Question

我有一个嵌套的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标签。

Answer 1

您可以从回调函数返回false，以阻止事件在DOM树中进一步传播。

并且还更改为使用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; }
});

此时我们建议您使用live转换为使用on()，因为live已被弃用。

在这种情况下，代码变为：

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

引用感谢Yoshi：http://jsfiddle.net/6FzWU/2/

Answer 2

使用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');

使用Jquery选择相同类型的元素中的元素

2 个答案: