jquery 带走导航栏

Question

当我的网站窗口很小（移动视图）并且用户点击汉堡菜单时，我使用 jquery 淡入导航菜单。当我在导航之外单击时，它会淡出导航菜单。

如果我将窗口大小调整为更大，我的导航栏应该自行调整大小，但它甚至不存在。我猜是因为我用 jquery 淡化了它。

我尝试让脚本仅在窗口大小小于特定大小时运行，但当我调整大小时导航菜单仍然消失。

我该如何解决这个问题？

jquery 脚本

//fades in
$("#mobileNav").click(function(){

  $(".nav").fadeIn("slow");
  event.stopPropagation();

})


// fade out on click outside of navigation menu
window.onclick = function(event) {
  if (!event.target.matches('.nav')) {
    isSmallWindow = $(window).width() < 600;
    if(isSmallWindow) {
      $(".nav").fadeOut("slow");
    }
  }

$(window).resize(function() {

        isBigWindow = $(window).width() > 600;
            if(isBigWindow) {
                            $(".nav").show();
            }
                    });

html

            <div id="mobileNav" class="mobileNavContainer floatLeft">
                <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>

            <div id="para1" class="floatLeft"></div>

            </div>




        <!----------  NAVIGATION  ---------->
        <div class="nav">




                <!-- link icons have custom css - icon -->
                <a href="index.php?page=clients" title="Clients">
                    <span class="navIcon">
                        <i class="fa fa-users icon" aria-hidden="true"></i>
                    </span>
                    <span class="navText">
                        Clients
                    </span>
                </a>

                <a href="index.php?page=invoices" title="Invoices">
                    <span class="navIcon">
                        <i class="fas fa-file-invoice icon"></i>
                    </span>
                    <span class="navText">
                        Invoices
                    </span>
                </a>



        </div>

Answer 1

您可能需要添加一个调整大小事件来检查窗口是否大于 600，否则它将永远不知道何时再次显示导航。

$(window).on('resize', function(e){
  if($(this).width() > 600 && $('.nav:visible').length == 0){
   $('.nav').fadeIn();
  }
});