时间戳

首页 > 解决方案 > 当我从菜单中单击链接标签时如何使导航栏消失

javascript - 当我从菜单中单击链接标签时如何使导航栏消失

问题描述

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

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

标签： javascripthtmlnavbar

解决方案

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

推荐阅读