javascript - 再次单击时执行 jQuery 操作

Question

我有菜单工作的基础，当我单击菜单元素时，它会打开(类似于 JQuery Accordion )，当我单击菜单中的另一个元素时，先前打开的菜单会关闭，新单击的菜单会打开。打开。它看起来像这样:

现在，我正在尝试实现在再次单击当前打开的菜单时关闭该菜单的功能。我正在使用 slideUp(); 方法，但很难弄清楚在哪里放置第二次单击同一元素的附加代码。

这是我所拥有的:

navigation.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');

var setContentHeight = function () {
    // reset height
    $RIGHT_COL.css('min-height', $(window).height());

    var bodyHeight = $BODY.height(),
        leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
        contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

    // normalize content
    contentHeight -= $NAV_MENU.height() + $FOOTER.height();

    $RIGHT_COL.css('min-height', contentHeight);
};


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

Answer 1

将 if ($li.hasClass('.active')) 更改为 if ($li.hasClass('active')) ，这应该可以解决问题。检查这个fiddle 。我创建了一个空的 setContentHeight 函数来使其工作。