Question

我正在使用嵌套子菜单的导航菜单。我想知道当我单击父菜单项

时，是否有一种方法可以实现可扩展的菜单

这是我的HTML代码，因为你们可以看到我在父菜单项中有2 ng-repeat而另一个如果子菜单项有一个或多个子菜单

＆＃13;

  <a class="log" href="#"><p class="login">Member LogIn</p></a>

＆＃13;

Answer 1

您可以简单地将内部ul元素设置为隐藏，然后使用以下代码显示/隐藏它们：

$("ul li").has("ul").click(function() {
  $(this).find("ul").toggle();
});

这将切换隐藏并在其父ul点击上显示子li元素。

<强>解释

它使用.has() method将click事件处理程序仅附加到li个ul子项的li，.toggle() method来显示/隐藏子列表点击了$("ul li").has("ul").click(function() { $(this).find("ul").toggle(); });元素。

<强>演示：

这是一个有效的演示片段：

＆＃13;

ul li {
  cursor: pointer;
}

ul li ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

＆＃13;

:global {
  /* ... */
}

＆＃13;

使用JavaScript可以扩展子菜单

1 个答案: