Question

我正在尝试使用jQuery将触发器添加到菜单中，然后让触发器切换子元素。使用jQuery prepend时，下面的代码不会打开子菜单，任何人都可以建议修复吗？

HTML

<ul>
  <li class="menu-item-has-children">Item 1</li>
    <ul class="sub-menu">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li class="menu-item-has-children">Sub Item 3</li>
        <ul class="sub-menu">
          <li>Sub Sub Item 1</li>
          <li>Sub Sub Item 2</li>
          <li>Sub Sub Item 3</li>
          <li>Sub Sub Item 4</li>
          <li>Sub Sub Item 5</li>
        </ul>
      <li>Sub Item 4</li>
      <li>Sub Item 5</li>
    </ul>
</ul>

CSS

ul li {
 list-style-type:none;
}
.open {
  width:20px;
  height:20px;
  background-color:red;
  color:#fff;
  display:block;
  cursor:pointer;
  text-align:center;
}
.sub-menu {
  display:none;
}

JS

jQuery(document).ready(function() {
jQuery('.menu-item-has-children').prepend ('<a class="open">+</a>');
    jQuery('.open').click(function () {
        jQuery(this).next('.sub-menu').toggle();
  });
});

JS FIDDLE

谢谢！

Answer 1

您的代码的问题不是JS，而是您的HTML。

正如Joseph Marikle所说：你的ul

允许内容零个或多个<li>个元素，而这些元素又经常出现包含嵌套的<ol>或<ul>元素。

不得包含li以外的任何子元素。

在您的情况下，元素.open没有兄弟姐妹，.next()将找不到.sub-menu。

如果你将内部ul移到li.menu-item-has-children内，你的JS就可以了：

jQuery(document).ready(function() {
  jQuery('.menu-item-has-children').prepend('<a class="open">+</a>');
  jQuery('.open').click(function() {
    jQuery(this).next('.sub-menu').toggle();
  });
});

ul li {
  list-style-type: none;
}

.open {
  width: 20px;
  height: 20px;
  background-color: red;
  color: #fff;
  display: block;
  cursor: pointer;
  text-align: center;
}

.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">Item 1
    <ul class="sub-menu">
      <li>Sub Item 1</li>
      <li class="menu-item-has-children">Sub Item 3
        <ul class="sub-menu">
          <li>Sub Sub Item 1</li>
        </ul>
      </li>
      <li>Sub Item 4</li>
    </ul>
  </li>
</ul>

使用prepend触发器的jQuery下拉菜单

1 个答案: