Question

我有一个verticalNavbar（有一个条形图标），它基于切换，所以当一个人点击它时切换（打开）并再次点击它切换（关闭）。但是，当用户点击网页上除栏图标（在verticalNavbar上）以外的任何地方时，我希望导航栏切换（关闭） - 假设它已被打开，否则页面点击不应该做任何事情。我发现很难用jquery切换进行管理，这是我的代码

＆＃13;

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

＆＃13;

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

＆＃13;

我的解决方案 -

＆＃13;

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

＆＃13;

Answer 1

您可以使用document.click或window.click来实现此目的。

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

Answer 2

尝试在打开时将类添加到导航栏，并在关闭时将其删除。使用相同的课程。

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

Answer 3

迈克尔，您可以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();
    }
});

单击条形图标以外的任何位置时，垂直导航栏应该会折叠

3 个答案: