Question

我有我的菜单工作的基础，当我点击菜单元素时，它打开（类似于JQuery手风琴），当我点击菜单中的另一个元素时，先前打开的菜单关闭，新点击打开。这是它的样子：

现在，我尝试实现关闭当前打开的菜单的功能，如果再次单击它。我使用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>

custom.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函数来使其工作。

再次单击时执行jQuery操作

1 个答案: