关于使用bootstrap创建导航栏的一些学习心得（dropdown二级菜单）

最新推荐文章于 2025-05-28 16:41:45 发布

layuecr

最新推荐文章于 2025-05-28 16:41:45 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： bootstrap 导航 dropdown

本文链接：https://blog.youkuaiyun.com/layuecr/article/details/77619648

在学习《Build a Personal Portfolio Webpage》项目时，作者遇到在max-width: 768px下实现dropdown二级菜单的挑战。通过尝试添加和移除类来调整overflow属性，以及使用hasClass检测，作者最终借助Bootstrap的shown.bs.dropdown事件解决了问题。文章详细记录了解决过程，并分享了相关代码和解决方案来源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在学习《Build a Personal Portfolio Webpage》这个的项目时，在做导航栏的时候卡了有一两天，问题出在我想我的适应于(max-width：768px)的导航栏出现二级菜单。下面的图片是我想达到的效果。

但是在做的时候却出现了问题，bootstrap自带的就是如第一张图的效果，我仿照freeCodeCamp给的例子，想做成这个样子：

不过我多了一个dropdown的下拉菜单，这就出现了问题。

先放一下html和css

<header class = "navbar navbar-fixed-top navbar-default" id = "banner">
  <div class = "container">
    <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar">
        <span class = "sr-only">切换导航</span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
      </button>
      <a href = "#home" class = "navbar-brand" title = "蓝鲸">
        <strong>蓝鲸</strong><small>（海洋哺乳动物）</small>
      </a>
    </div>
    <nav class = "collapse navbar-collapse" id = "navbar">
      <ul class = "nav navbar-nav navbar-right">
        <li class = "active"><a href = "#home">蓝鲸简介</a></li>
        <li><a href = "#picture">蓝鲸图片</a></li>
        <li class = "dropdown" id = "aboutMenu">
          <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">相关知识
            <span class = "caret"></span>
          </a>
          <ul class = "dropdown-menu navbar-right">
            <li><a href = "#classify">物种分类</a></li>
            <li><a href = "#name">物种命名</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

#navbar{
  font-size:16px;
  background-color:#003871;
  padding-top:5px;
}
@media(max-width:768px){
  #navbar{
    text-align:center;
    margin:10px auto;
  }
  #navbar li{
    display:inline-block;
  }
  #navbar .dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
  }
  #navbar .dropdown-menu li{
    display:block;
  }
}
@media(max-width:400px){
  #navbar li{
    display:block;
  }
  #banner small{ 
    display:none;
  }
  #navbar .dropdown-menu{
    position:relative;
    text-align:center;
  }
}

结果点开下拉菜单的时候出现了这个：

对，出现了滚动条，然后我就给它"#navbar"加了"overflow:visible;" 。这下显示是正常了，可是动画滚动的时候又出问题了，有dropdown类的那个菜单没滚动动画了，出来的感觉就是延缓了消失，就像下面这样。

原来的想法是使用addClass和romoveClass添加和移除一个类，新添加的类#navbar.dropdownMenu{ overflow:visible;}，当"相关知识"被点击的时候触发，然后行不通。

再换，"#navbar"里面用hasClass检测有没有“.dropdownMenu”，有的话就移除，没有的话就添加，当时是觉得挺有道理的，嗯，实践证明，不行，要不就是收上去的时候正常，放下来的时候不正常；要不就是放下来的时候正常，收上去的时候不正常。

想了挺久的，还是没想出来，本来想放弃，用回原来的一个li占一行的原模板，看了看效果，还是觉得不是特别好看，因为字不多，但占位又占了一整行，感觉很空。

临睡前灵光一闪，好像有个shown,show,hide,hiden事件，可以实现动画前完成动作，还是动画后完成动作。不过在菜鸟里面学习的时候好像没发现有shown.bs.dropdown事件，嗯，百度了下，有这个时间。然后困扰了这么久的问题终于解决了。附上js：

$(function(){
  $("#aboutMenu").on("shown.bs.dropdown",function(){
    $("#navbar").addClass("dropdownMenu");
  });
  $("#aboutMenu").on("hide.bs.dropdown",function(){
    $("#navbar").removeClass("dropdownMenu");
  });
});

纪念下花费这么多的时间，然后顺带做个笔记。

百度出来的结果，然后就安心的去改了：

https://stackoverflow.com/questions/28541887/bootstrap-dropdown-shown-bs-dropdown-event-not-firing-after-css-transition