1

我发现自己在这样做，但不确定这是否是最好的方法。这里举个例子。

<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();
});

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

编辑：我不能使用 css 因为这个：当一个项目被单击/悬停时在 Opera/IE 中失败它在这两个浏览器中失败。http://jsfiddle.net/cJsn2/1/这是因为 html 标准。

4

5 回答 5

2

您只能使用 CSS 执行此操作

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

至于JavaScript，没关系，你可以用$.children 代替$.find 来遍历更少的节点

于 2013-01-08T14:55:36.447 回答
1

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

// 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/

于 2013-01-08T15:12:08.753 回答
1

尝试仅使用 css 执行此操作

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

#menubar li ul{ 
  display:none; 
}

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

jsfiddle >

于 2013-01-08T15:01:21.867 回答
1

你想用的是最接近的。它沿着 DOM 树向上移动以找到匹配选择器的第一个父元素：

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


$(".menu_item").hover(function() {
    $(this).next().show();
});
于 2013-01-08T14:55:34.590 回答
0

您可以使用 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>
于 2013-01-08T14:55:20.893 回答