jQuery在打開後立即關閉側面菜單

我創建了一個使用Gentallela主題作爲我的基礎的側面菜單，但是，當我單擊一個菜單項時，它立即打開並關閉自身。期望的結果是它保持開放。jQuery在打開後立即關閉側面菜單

現在我的代碼非常簡單，並且是主題本身的精確副本。它似乎最初工作，因爲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>

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

 
$(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類。

來源

2016-06-21 Godzilla74

包括jQuery的在你的腦袋節 –

@SaiKiranUppu我... '' – Godzilla74

可能是你應該調試JS用瀏覽器開發工具欄代碼來查看代碼執行流程。我認爲'If'模塊正在執行'else'的位置 – Venky

那麼，完成重構後，下面的工作。我不是一個真正的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(); 
     }); 
    }

來源

2016-06-21 15:32:15 Godzilla74

jQuery在打開後立即關閉側面菜單

回答

相關問題