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

jQuery带走导航栏

1 个答案: