如何在jQuery中实现DOM目标？

Question

因此，在JS中，我会做类似的事情。

var subItems = document.querySelectorAll(".dropdown");

然后以“ dropItem [0]”或forEach循环为目标。 现在，我也在尝试在jQuery中执行此操作。 通过执行以下操作：

 $("p").click(function() { var dropwDown = $(this).find(".dropdown-contain"); $(dropDown).show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu-dropdown"> <div class="whisky"> <p>Whisky</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> <div class="wine"> <p>Wine</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> <div class="beer"> <p>Beer</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> <div class="cocktail"> <p>Cocktail</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> </div> 

但是，这不起作用。 这是我要定位的HTML。 然后特别是下拉菜单。

Answer 1

有两件事：

• .dropdown-contain元素不在p元素之内，因此find找不到它们。 如果您首先进入div ，它将：

   $(this).parent().find(".dropdown-contain"); 

• dropDown已经是一个jQuery对象，无需再次执行$(dropDown) 。

• 您所显示的内容不会隐藏任何ul ，因此在其上调用show不会产生任何可见的效果。

这是使用上面的代码的更新的代码段，带有.dropdown-contain { display: none; } .dropdown-contain { display: none; }在CSS所以我们可以看到show的工作：

 $("p").click(function() { $(this).parent().find(".dropdown-contain").show(); }); 

 .dropdown-contain { display: none; } 

 <div class="menu-dropdown"> <div class="whisky"> <p>Whisky</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> <div class="wine"> <p>Wine</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> <div class="beer"> <p>Beer</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> <div class="cocktail"> <p>Cocktail</p> <div class="dropdown-contain"> <ul class="dropdown"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>