jQuery列表切换子项

Question

My problem is when I click on the #topmenu it conflict's with another menu that I have 我的问题是，当我单击#topmenu时，它与我拥有的另一个菜单冲突

I want to open children UL element when li is clicked 当我单击li时，我想打开儿童UL元素

Javascript Code: JavaScript代码：

$("#topmenu").click(function(){
  $(".treeview-menu").addClass("treeview-menu open").toggle();
});

HTML 的HTML

<ul class="sidebar-menu" id="treeview-menu">
  <li class="treeview" id="topmenu">
    <a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
      <i class="fa fa-angle-left pull-right"></i></a>
    <ul class="treeview-menu">
      <li><a href="#"><i class="fa fa-circle-o"></i>Pagamentos</a></li>
        <li><a href="#"><i class="fa fa-circle-o"></i>Relatórios</a></li>
    </ul>
  </li>
  <li class="treeview" id="topmenu">
    <a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
     <i class="fa fa-angle-left pull-right"></i></a>
    <ul class="treeview-menu">
      <li><a href="#"><i class="fa fa-circle-o"></i>Pagamentos</a></li>
      <li><a href="#"><i class="fa fa-circle-o"></i>Relatórios</a></li>
    </ul>
  </li>
</ul>

Answer 1

Changed the class name and id name of 2nd ul and li tag. 更改了第二个ul和li标签的类名和ID名称。 Works fine 工作正常

   <!DOCTYPE html>
    <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <style>

      </style>
    </head>
    <body>
      <ul class="sidebar-menu" id="treeview-menu">
           <li class="treeview" id="topmenu">
                 <a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
                 <i class="fa fa-angle-left pull-right"></i></a>
                 <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i>Pagamentos</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i>Relatórios</a></li>
                 </ul>
              </li>
              <li class="treeview1" id="topmenu1">
                 <a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
                 <i class="fa fa-angle-left pull-right"></i></a>
                 <ul class="treeview-menu1">
                    <li><a href="#"><i class="fa fa-circle-o"></i>Pagamentos</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i>Relatórios</a></li>
                 </ul>
              </li>
      </ul>

    <script>
    $(document).ready(function(){

      $(document).ready(function(){

  $("#topmenu").click(function(){
      $(".treeview-menu").addClass("treeview-menu open").toggle();
  });

  $("#topmenu1").click(function(){
      $(".treeview-menu1").addClass("treeview-menu open1").toggle();
  });
     }); 

    </script>

    </body>
    </html>

Answer 2

You have medley of IDs with same names. 您有多个具有相同名称的ID。

Use classes for common JS behavior. 将类用于常见的JS行为。

$(".treeview").click(function(){
    $(this).find(".treeview-menu").addClass("open").toggle();
});

jQuery列表切换子项

问题描述

2 个解决方案

解决方案1
0 2015-05-13 19:17:39

解决方案2
0 已采纳 2015-05-13 19:25:33

jQuery列表切换子项

问题描述

2 个解决方案

解决方案1 0 2015-05-13 19:17:39

解决方案2 0 已采纳 2015-05-13 19:25:33

解决方案1
0 2015-05-13 19:17:39

解决方案2
0 已采纳 2015-05-13 19:25:33