Question

因此，我一直在尝试在用户单击导航栏时隐藏它。我不知道为什么这个函数不会调用。完整的导航栏隐藏在屏幕（top -120px）的外面。当用户单击打开按钮时，jquery将顶部更改为0。如果用户单击导航栏中的链接，则将其关闭，但是，如果用户单击该链接，则尝试执行相同的操作。

我尝试使用.click在“内容” div上，但这也不起作用。

以下是带有整个导航栏的小提琴：https://jsfiddle.net/daxgnq07/

jQuery

$(document).mouseup(function (e) {
    var container = $("header");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.css("top", "-120px");
        container.css("margin-top", "0px");
    }
});

HTML

<header>
    <div id="navbar">
        ...
    </div>
</header>
<div id="content">
</div>

Answer 1

为什么不在内容上绑定点击事件以隐藏导航栏？如果它可以满足您的需求，请尝试此操作，当使您的网站具有响应能力时，创建带有像素的动画将是一个问题

$(document).ready(function () {
	$("#content").on('click',function(){
  	$("#navbar").hide();
  })
});

#navbar {
 background-color: black;
 height: 100px;
 width: 100%;
 color: white;
 text-align: center;
}

#content {
 background-color: #009900;
 height: 100px;
 width: 100%;
 color: white;
 text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <div id="navbar">
        navbar
    </div>
</header>
<div id="content">
  content
</div>

编辑

看着您在评论中提供的小提琴，我发现您正在以

的形式调用JQuery。

$("#something).click(funct);

我怀疑此表单已被弃用，请按给定顺序使用以下内容：

  $("#content").on('click',closeNavbar);
  $(".navbar-items").on('click',closeNavbar);
  $("#menu-button").on('click',openNavbar);
  $(".navbar-items").on('mouseover',changeSVG); //? changeSVG is not a declared function

这应该返回您的预期行为

Answer 2

第一件事，您应该创建一个包含css的类，该类通过jQuery通过如下样式进行显示：

.headerShown {
   top: -120px;
   margin-top: 0px; 
}

然后您可以在容器和窗口单击上添加删除此类。如下：

    $(document).ready(function () {
        $(window).click(function() {
            if ($("header").hasClass("headerShown")) {
                $("header").removeClass('headerShown');
            }
        });
        $("#content").on('click',function(){
            $("header").toggleClass('headerShown');
            return false;
        });
    });

希望它对您有帮助。

单击导航栏时如何隐藏导航栏

2 个答案: