Question

我发现自己这样做但不确定这是否是最佳方式。这是一个例子。

<ul id="menubar">
  <li><a class="menu_item">File</a>
    <ul>
      <li><a id="menu_file_new">New</a></li>
      <li><a id="menu_file_open">Open</a></li>
    </ul>
  </li>
  <li><a class="menu_item">Run</a>
    <ul>
      <li><a id="menu_run_preview">Preview</a></li>
      <li><a id="menu_run_compile">Compile</a></li>
    </ul>
  </li>
</ul>

JQuery的

$('.menu_item').hover(function(){
    $(this).find('ul').show();
});

只是想知道这是最好的方法，发现有点矫枉过正吗？

编辑：由于这个原因，我无法使用css：当点击某个项目时，Opera / IE中出现故障/悬停在这两个浏览器中失败。 http://jsfiddle.net/cJsn2/1/这是因为html标准。

Answer 1

您只能使用CSS

.menu_item ul { display: none; }
.menu_item:hover ul {display: block; }

对于JavaScript，没关系，您可以使用$ .children而不是$ .find来遍历更少的节点

Answer 2

您要使用的是closest。它向上移动DOM树以找到与选择器匹配的第一个父元素：

~~$('.menu_item').hover(function(){ $(this).closest('ul').show(); });~~

$(".menu_item").hover(function() {
    $(this).next().show();
});

Answer 3

尝试使用css

问题是你要在 li 上应用“悬停”而不是 a

#menubar li ul{ 
  display:none; 
}

#menubar li:hover > ul{ 
  display:block; 
}

jsfiddle >

Answer 4

这将是一个简单的悬停脚本：

// I'm purposely using `toggleClass`, instead of show/hide, to
// have more flexibility with styling
$('.menu_item').each(function () {
  var $li = $(this).closest('li');

  $(this).hover(function () {
    $li.toggleClass('hover');
  });
});

使用以下css：

ul ul {
  display: none;
}

li.hover > ul {
  display: block;
}

演示：http://jsbin.com/ehifod/1/

Answer 5

您可以使用CSS（假设ul元素中包含.menu_item元素）：

.menu_item:hover > ul {
   display: block;
}

演示：http://jsfiddle.net/maniator/cJsn2/

使用以下HTML：

<ul id="menubar">
  <li class="menu_item"><a>File</a>
    <ul>
      <li><a id="menu_file_new">New</a></li>
      <li><a id="menu_file_open">Open</a></li>
    </ul>
  </li>
  <li class="menu_item"><a>Run</a>
    <ul>
      <li><a id="menu_run_preview">Preview</a></li>
      <li><a id="menu_run_compile">Compile</a></li>
    </ul>
  </li>
</ul>

$（this）.find（..）替代

5 个答案: