因此,在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。 然后特别是下拉菜单。

===============>>#1 票数:2 已采纳

有两件事:

  • .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> 

  ask by Dario Sanchez Martinez translate from so

未解决问题?本站智能推荐:

2回复

jQuery中的超时更新Dom?

假设我要更改图片来源onClick并进行一些计算。 现在发生的是,函数退出时源发生了变化。 (Dom忙吗?) 我怎样才能使图像源立即更新,然后函数进入while循环? HTML: JS: 这是JSFiddle。
1回复

使用jQuery在HTML dom中遍历

我有一个基本的查询。 这是代码的一部分。 现在,如果我这样查询div id =“ something” 我想它必须更改class5 ..span的html内容,但实际上它没有发生,因此任何帮助都是巨大的帮助。谢谢
3回复

如何在DataTables jquery中的具有隐藏行的单列中获取单元格的DOM?

我想获取“ dom”而不是数据表jquery中隐藏行的原始html文本。 例如,如果您使用DataTables的搜索功能,则某些行将被隐藏,并且当我使用jquery方法获取dom时,唯一获得的是可见行以及当我使用datatables函数列时( ).data()我得到一个字符串数组,但接着我
2回复

如何在jQuery .load()之后更新DOM?

我想从模板文件(b.xhtml)加载html内容,将其插入调用文件(a.xhtml),然后更新插入的节点(例如添加/删除属性等)。 插入部分工作正常,但DOM似乎没有更新。 这是测试用例。 a.xhtml (调用html文件) b.xhtml (模板html文件)
2回复

如何在带有jQuery的动态DOM元素上使用.insertAfter?

因此,当我发现无法对已动态创建的元素使用insertAfter()方法时, 我尝试使用jQuery的DOM创建工具向表中动态添加一行,呈现此代码: 无用的,因为那正是我在做什么。 尝试在动态元素上使用insertAfter 。 仍然能产生干净代码的最简单,最有效的解决方案是什么?
1回复

如何在jquery中重写字符串以避免再次访问dom,并使用jquery选择器

我正在尝试重新编写一些jquery,以便使用我先前创建的选择器,这样就无需再次访问DOM。 我创建的选择器已经访问过DOM一次,我想在函数的字符串文字中使用其内容。 我当前的代码如下: 可以正常工作,但是“ .nav a”正在访问DOM,在这种情况下我不希望这样做。 我想使用this。$ na
1回复

在JQuery中,如何访问DOM元素数组?

在JQuery中,如何访问DOM元素数组? 我正在编写一些使用jQuery MultiSelect小部件的继承代码。 我有一个问题是一个jQuery问题(所以没有公平地将其作为楔形制作者的问题)。 该对象的文档和演示非常好。 在这个页面上, http://www.erichynd
2回复

无法在jQuery中获取DOM元素

我试图从jQuery选择器数组中获取DOM元素。 但是,它仅返回文本,而不返回我想要的DOM元素。 我想获取DOM元素,这样我就可以获取元素在页面上的位置并滚动到它。 $(this)=列表元素.title =页面上的class =“ title”和“ title small”元素
2回复

替换jQuery非DOM对象中的元素之一

在非DOM环境中,我试图修改HTML字符串,以替换其成员之一。 jQuery的replaceWith不起作用,因为它用于DOM。 我该怎么做呢?
2回复

jQuery mobile - Pagecontainer从DOM中消失

在jQuery mobile中我想从外部文件加载pagecontainers。 我可以将标记添加到我的DOM中,但之后我遇到的问题是,当我导航到#page2时,整个#page1-div从DOM中消失,因此我无法导航回来(请参阅下面的屏幕截图)。 点击“转到第2页”之前的DOM 单