javascript - jQuery 一打开就关闭侧边菜单

Question

我使用 Gentallela 创建了一个侧边菜单主题作为我的基础，但是，当我单击一个菜单项时，它会立即打开然后自行关闭。期望的结果是它保持打开状态。

现在我的代码非常简单并且是主题本身的精确副本。它最初似乎有效，因为 li 元素获得了 active 类，但由于某种原因 active 类被撤销并且菜单崩溃了。这里有什么问题？

sidenav.html.erb

<!-- menu links -->
      <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">

        <div class="menu_section">
          <h3>General</h3>
          <ul class="nav side-menu">
            <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
              <ul class="nav child_menu" style="display: none">
                <li><a href="index.html">Dashboard</a>
                </li>
              </ul>
            </li>
            <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
              <ul class="nav child_menu" style="display: none">
                <li><a href="general_elements.html">General Elements</a>
                </li>
              </ul>
            </li>
            <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
              <ul class="nav child_menu" style="display: none">
                <li><a href="chartjs.html">Chart JS</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

自定义.js

var URL = window.location,
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');

$(function () {
         
    $SIDEBAR_MENU.find('a').on('click', function(ev) {
        var $li = $(this).parent();

        if ($li.hasClass('.active')) {
          $li.removeClass('active');
          $('ul:first', $li).slideUp(function(){
              setContentHeight();
          });
        } else {
          $li.addClass('active');
          $('ul:first', $li).slideDown(function(){
              setContentHeight();
          });

        }
      
});

通过对初始 JQuery(上面发布的)进行一些大刀阔斧的编辑，我现在打开了一个菜单，但是当选择另一个菜单时，它不会关闭其他菜单。相反，单击的任何元素都将保持 active 类。

Answer 1

好吧，在完全重构之后，下面的工作。我不是真正的 JS 专家，所以我确定它在某处存在缺陷......:

自定义.js

$SIDEBAR_MENU.find('a').on('click', function(ev) {
    var $li = $(this).parent();

    if ($li.hasClass('.active')) {
      $li.removeClass('active');
      $('ul:first', $li).slideUp(function(){
          setContentHeight();
      });
    } else {
      $li.addClass('active');
      $SIDEBAR_MENU.find('.side-menu li').not($li).removeClass('active');
      $SIDEBAR_MENU.find('.side-menu li').not($li).find('.child_menu').removeClass('active').slideUp();
      $('ul:first', $li).slideDown(function(){
          setContentHeight();
      });
    }