Question

我有这个导航栏，它也可以按我想要的方式工作，但是我的主要问题是我希望通过单击菜单上的任何链接来使下拉菜单消失，因为我不确定要添加什么到我的当前代码中才能使其正常运行如预期的。谢谢您的帮助，将不胜感激

<nav id="navbar">
    <div class="logo">
         <a href="#zero"><img src="log.png"></a>
    </div>

    <ul>
        <li><a href="#lowerSec" class="active">About</a></li>
  <li><a href="#container">Contact</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Home</a></li>

    </ul>
</nav>

这是我的JS

效果很好，我只是标题中提到的一项附加功能，因为我不知道该怎么做

    <script type="text/javascript">

    $(window).on('scroll', function()
   {

    if($(window).scrollTop())
   {
     $('nav').addClass('black');
    }

   else
   {
     $('nav').removeClass('black');
   }
   }
   )

   $(document).ready(function() {
   $(".menu").on("click", function() {
   $("nav ul").toggleClass("active");
   });
  })

Answer 1

CSS样式可能是一种潜在的解决方案。所有标签都显示为块，因此在CSS文件中添加

    .makeDisappear{
    display:none
    }

尽管如此，我还是建议为您的导航栏重命名您的ID，使之更加独特。

因此示例jQuery将是：

$("a").on("click",function(){
document.getElementById("navbar").classList.add("makeDisappear");

//or simply $("#navbar").addClass("makeDisappear")
})

使导航栏重新出现将display：none更改为display：block

Answer 2

只需将nav ul li a添加到您的点击功能即可。由于我不知道您的标记是什么样子，因此这里是一个快速演示：

$(".menu, nav ul li a").on("click", function(e) {
  e.preventDefault();
  $("nav ul").toggleClass("active");
});

ul{
  display:none;
}

ul.active{
  display:block;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<nav>
  <button class="menu">
  Menu
  </button>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

使用jquery可以用逗号分隔各个选择器。由于您已经具有切换活动类的功能，因此只需将nav ul li a添加到现有函数中即可。

当我从菜单中单击链接标记时，如何使导航栏消失

2 个答案: