Javascript jQuery列表切换子项_Javascript_Jquery_Html

Javascript jQuery列表切换子项

javascript jquery html

Javascript jQuery列表切换子项,javascript,jquery,html,Javascript,Jquery,Html,我的问题是，当我点击顶部菜单时，它与我拥有的另一个菜单冲突我想在单击li时打开children UL元素 Javascript代码： $("#topmenu").click(function(){ $(".treeview-menu").addClass("treeview-menu open").toggle(); }); HTML <ul class="sidebar-menu" id="treeview-menu"> <li class="treeview"

我的问题是，当我点击顶部菜单时，它与我拥有的另一个菜单冲突

我想在单击li时打开children UL元素

Javascript代码：

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

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>

更改了第二个ul和li标签的类名和id名。很好

   <!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>
















$（文档）.ready（函数（）{
$（文档）.ready（函数（）{
$（“#顶部菜单”）。单击（函数（）{
$（“.treeview menu”）.addClass（“treeview menu open”）.toggle（）；
});
$（“#topmenu1”）。单击（函数（）{
$（“.treeview-menu1”）.addClass（“treeview菜单打开1”）.toggle（）；
});
});

您有许多同名的ID

将类用于常见的JS行为

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

为什么您有多个id的

topmenu

？