Question

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

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

sidenav.html.erb

＆＃13;

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

＆＃13;

custom.js

＆＃13;

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();
          });

        }
      
});

＆＃13;

对初始JQuery进行了一些大幅度的编辑（上面发布）我现在有一个菜单打开，但是当选择另一个时，它不会关闭其他菜单。相反，点击的任何元素都会保留active类。

Answer 1

好吧，经过完整的重构后，以下工作正常。我不是一个真正的JS人，所以我确定它在某个地方存在缺陷......：

<强> custom.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();
      });
    }

jQuery打开后立即关闭侧边菜单

1 个答案: