javascript - jquery has() 似乎没有按预期工作

Question

我有这个Fiddle，由于某种原因，我的下拉菜单在单击时不起作用。

在小提琴中，当您单击“格式”时，它应该会下拉，但它没有这样做。什么都没有发生，我认为使用has()jquery 方法会起作用，但它没有这样做。我使用不正确吗？

$("ul > li").on("click", function(){
    $(this).has("ul").css({display: "block"});
});

Answer 1

.has在这种情况下，这不是您要查找的功能。这就是用于：

想象一下，你有一个这样的 HTML 结构：

<div>
  <em>hey</em>
</div>

<div>
  <ul>
    <li>hello</li>
  </ul>
</div>

<div>
  <strong>hey</strong>
</div>

现在假设您使用 jQuery 选择器 ( $('div'))，那么您将获得一个 jQuery 对象，其中包含 3 个不同的元素：

• 第一个 div（带 em）
• 第二个 div（带有 ul）
• 第三个div（强）

现在假设您想将这些过滤到仅包含ul其中的 div。你可以这样做.has：

$('div').has('ul')

现在您将拥有一个包含 1 个元素的结果集：

• 第二个 div（带有 ul）

using.has不会像您期望的那样遍历到 ul 。你应该.find像这样使用：

$("ul > li").on("click", function(){
    $(this).find('ul').css({display: "block"});
});

Answer 2

工作演示 http://jsfiddle.net/Qwdg6/ 或 http://jsfiddle.net/Qwdg6/1/

接口：

• .find：http ://api.jquery.com/find/
• .children：http://api.jquery.com/children/ ：http : //jsfiddle.net/Qwdg6/1/

满足您的需求:)

代码

$("ul > li").on("click", function(){
    $(this).find("ul").css({display: "block"});
});

或者

$("ul > li").on("click", function(){
    $(this).children("ul").css({display: "block"});
});

Answer 3

我相信这个问题与事件处理程序的定义方式有关。如果您在回调中定位按钮，则可以从那里访问下拉列表：

$("ul > li").on("click", function(e){
    $(e.target).next("ul").css({display: "block"});
});

如果您希望在再次单击该按钮时下拉菜单向上滑动，您可以执行以下操作：

$("ul > li").on("click", function(e){
    $(e.target).next("ul").slideToggle();
});