javascript - 通过jquery给li和parents添加active类

Question

我是 javascript 的初学者，我一直在尝试使用 jquery 将 active 类添加到 li 中，即单击时展开 li 并使其处于事件状态:

  <script>
      $(document).ready(function() {
           var url = window.location['pathname'];
           jQuery('li a').each(function() {
               if($(this).attr('href') == url)
                   $(this).parent().addClass('active');
           });
       });
  </script>

这只会使子菜单处于事件状态，但不会展开。但是当我手动将事件类(如下所示)添加到treeview和li时，它扩展并变得事件。如何通过jquery动态添加active类？

<aside class="main-sidebar">
   <section class="sidebar">
      <ul class="sidebar-menu" data-widget="tree">
         <li class="header">MENU</li>
         <li class="treeview active">
            <a href="#">
            <i class="fa fa-table"></i> <span>USER</span>
            <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
            </span>
            </a>
            <ul class="treeview-menu">
               <li><a href="{{ url_for('add')}}"><i class="fa fa-plus"></i> Add</a></li>
               <li class="treeview active">
                  <a href="#"><i class="fa fa-circle-o"></i> Profile
                  <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                  </span>
                  </a>
                  <ul class="treeview-menu">
                     <li class="active"><a href="{{ url_for('view')}}"><i class="fa fa-circle-o"></i> View </a></li>
                     <li><a href="{{ url_for('settings')}}"><i class="fa fa-circle-o"></i> Settings </a></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </section>
</aside>

Answer 1

因此，您需要使用 parents 在所有 .treeview 上应用 active 类:

$(this).parents('.treeview').addClass('active');