再度クリックするとjQueryアクションが実行されます

Question

私はメニュー要素をクリックするとJQueryアコーディオンと同様に開くメニューが動作し、メニュー内の別の要素をクリックすると以前に開いたメニュー新しくクリックされたものが開きます。ここでは次のようになります。今

、私はそれを再度クリックすると、現在開いてメニューを終了する機能を実装しようとしています。私はslideUp();メソッドを使用していますが、同じ要素の2回目のクリックのための追加コードをどこに配置するのか分かりません。

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関数を作成しました。その変更を行うと、私はメニュー項目を展開して自動的に閉じます。