垂直導航欄應該在點擊任何地方以外的任何地方崩潰吧圖標

Question

我有一個verticalNavbar（有一個酒吧圖標），這是基於切換，所以當一次點擊它切換（打開）並再次點擊它切換（關閉）。但是當用戶點擊網頁上的任何地方而不是bar-icon（verticalNavbar）時，我想讓導航欄切換（關閉） - 假設它已打開，否則頁面點擊不應該做任何事情。我發現很難與jQuery切換來管理，這裏是我的代碼

 $('.bar-icon').on("click", function(){ 
 
      $(".left-side").toggleClass('wdt80'); 
 
      $(".left-side").toggleClass('wdt210'); 
 
      $('.left-side-inner').toggle('fast'); 
 
      $(".left-side").toggleClass("shadow"); 
 
      $('.overlay').toggle(); 
 
     });

<div class="bar-icon"> 
 
    <a ><img src="///_baricon_img.jpg"></a> 
 
</div>

我的解決方案 -

// closing vertical navbar - while opened 
 
      $('.page').on("click",function(){ 
 
       if ($('.left-side-inner').is(':visible')) { 
 
          $(".left-side").toggleClass('wdt210');  
 
          $(".left-side").toggleClass('wdt80'); 
 
          $('.left-side-inner').toggle('fast'); 
 
          $(".left-side").toggleClass("shadow"); 
 
          $('ul.sub-menu').hide(); 
 
          // $('.overlay').toggle();     
 
       } 
 
      });

Answer 1

邁克爾，你可以addClass而不是使用toggleClass，也比較如果事情有一個類，以防止添加重複類，所以你可以做這樣的事情：

$('.bar-icon').on("click", function(){ 
    if($(".left-side").hasClass('wdt210'){ 
     $(".left-side").addClass('wdt210'); 
     $('.left-side-inner').show('fast'); 
     $(".left-side").addClass("shadow"); 
     $('.overlay').show(); 
    } 
}); 

Answer 2

您可以使用document.click或窗口。點擊以實現此目的。

$(window).click(function(){ 
//Close menu 
}); 
$(document).on('click', function(){ 
//Close menu 
}); 

Answer 3

嘗試在打開時嚮導航欄中添加類，並在關閉時刪除它。使用同一個班級。

$(document).click(function() { 
    if($('.bar-icon').hasClass('active')) { 
     $('.bar-icon').trigger('click'); 
    } 
});