(美元);()的选择

$(this).find(..) alternative

本文关键字：选择 美元      更新时间：2023-09-26

我发现我自己这样做，但不确定这是否是最好的方式。下面是一个例子。

<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标准

只能在CSS中使用

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

对于JavaScript，可以使用$。而不是$。查找遍历更少的节点

这是一个简单的悬停脚本:

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

试试用css

问题是你要在li上应用hover而不是在a

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

jsfiddle>

你想用的是最接近的。它沿着dom树查找匹配选择器的第一个父元素:

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


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

您可以使用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>
相关文章：