Question

我有这个非常简单的jQuery函数，允许ul.lev2在悬停时显示。

$('#tab_menu li.li_level1').hover(
  function() { $('#tab_menu ul.li_level2', this).css('display', 'block'); },
  function() { $('#tab_menu ul.li_level2', this).css('display', 'none'); });

不幸的是，它与我的html标记一起工作。我真的找不到出错的地方。

HTML：

<div class="tab_menu menudefault" id="tab_menu">
<ul id="tab_menu_ul" class="level_1">
<li class="reserves level_1 parent parent_level_1 parent_ parent_level_1_ ">
            <span class="reserves level_1 parent parent_level_1 parent_ parent_level_1_  menuitem">123</span>
      <ul class="level_2 child_of_Reserves">
          <li class="find_a_nature_reserve level_2 parent parent_level_2 parent_ parent_level_2_ ">
              <span class="find_a_nature_reserve level_2 parent parent_level_2 parent_ parent_level_2_  menuitem">abc</span>
             </li>
          <li class="visitor_information level_2 noline child lastlev2 last">
              <a href="#" class="visitor_information level_2 noline child lastlev2 last menuitem">cde</a>
          </li>
            </ul>
        </li>
</ul>
</div>

每当我从jQuery中删除$（this）时，它似乎都有效，但是我有一个带有ul.lev2的li标签，所以当我将任何父级li悬停时，它显然会推送所有的子ul标签。

有什么想法吗？

Answer 1

$('#tab_menu ul.li_level2', this)

您要在ul.li_level2内的#tabmenu内某处选择this元素。由于this是1级元素，因此您永远不会在#tabmenu内找到this！

这是一个“范围选择器”。它要求选择器中最左边的元素（#tabmenu）位于上下文节点（this）内，而不仅仅是您实际选择的最右边的元素。

你可能意味着：

$('ul.li_level2', this)

由于this始终在#tab_menu内，您无需检查。

jQuery的上下文节点总是引入一个范围选择器。这与document.querySelector()（例如ul.li_level2相反，#tab_menu可用于您的示例，因为所选this位于{{1}}内和{{1}}内。（Selectors-API methods建议将范围选择器作为浏览器级标准引入，但尚未实现它。）

Answer 2

嗯..你试图访问

$('ul.li_level2', this)

但我在你发布的代码中不存在。你应该找到

$('ul.level2', this)

在IE6中使用jQuery弹出CSS菜单

2 个答案: