通过jquery

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在所有active上应用.treeview课程：

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

Answer 2

实际上，将parent()更改为parents()会修复它：

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