Question

我遇到了jQuery选择器的问题，我无法找到代码的问题。

我有一系列嵌套列表：

<ol id="chaps">
  <li>Newton</li>
  <ul class="assignments">
    <li>One</li>
    <li>Two</li>
  </ul>
  <li>Motion</li>
  <ul class="assignments">
    <li>One</li>
    <li>Two</li>
  </ul>
</ol>

assignments类将CSS设置为display:none以隐藏列表。

我尝试过的jQuery是：

$("#chaps > li").click(function() {
  $(this).closest("ul").find(".assignments").toggleClass("show");

});

...但它不会显示其他选项。我已经得到了{em>所有的.assignments类来显示类似的脚本，但我想将它保留给直接的兄弟姐妹。选择任何帮助将不胜感激。

这是CodePen Demo

Answer 1

ul元素不能是ol元素的子元素，但它们可以是li元素的子元素。而且，您知道，下次您需要使用它时，.closest( selector )表示：

对于集合中的每个元素，获取与之匹配的第一个元素选择器通过测试元素本身并遍历其中 DOM树中的祖先。

$("#chaps > li").click(function() {
  $(this).find("ul.assignments").toggleClass('hide');
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="chaps">
  <li>Newton
  <ul class="assignments hide">
    <li>One</li>
    <li>Two</li>
  </ul>
  </li>
  <li>Motion
  <ul class="assignments hide">
    <li>One</li>
    <li>Two</li>
  </ul>
  </li>
</ol>

Answer 2

<li>Motion
  <ul class="assignments">
    <li>One</li>
    <li>Two</li>
  </ul>
</li>

这是将列表嵌套到其他列表中的唯一方法。

Answer 3

您还可以创建一个不依赖于给定HTML结构的更通用的小部件......

$.fn.toggleMenu = function(opt){

  opt = $.extend({
    hideClass:"hidden",
    selector:"ul",
    triggerEvents:"click"
  },opt)

  function _init(){
    $(this).each(_initEach);
  }
  function _initEach(){
    $(this).on(opt.triggerEvents,toggleVis);
  }
  function toggleVis(e){
    $(e.target)
      .children(opt.selector)
      .toggleClass(opt.hideClass);
  }
  _init();

}
$(".toggle_menu").toggleMenu({triggerEvents:"click mouseenter"});

这可以配置为接受任何html结构。

Try It!

Answer 4

除了让您的代码工作之外，始终建议使用有效的标记。 ul / ol不能是另一个ul / ol的直接孩子。您的html无效，并且根据W3验证器有以下错误：

1。错误：在此上下文中，元素ul不允许作为元素ol的子元素。（抑制此子树中的更多错误。）

从第7行第3栏;到第7行，第26栏

on↩↩＆lt; 可以使用元素ul的上下文：期望流内容的位置。元素ol的内容模型：零个或多个li和脚本支持元素。 2。错误：在此上下文中，元素ul不允许作为元素ol的子元素。（抑制此子树中的更多错误。）

第12栏第3栏;到第12行，第26栏

on↩↩＆lt; 可以使用元素ul的上下文：期望流内容的位置。元素ol的内容模型：零个或多个li和脚本支持元素。

单击显示嵌套列表项

4 个答案: