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

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

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

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

        先放一下html和css

  

    

      
        切换导航
        
        
        
      
      
        蓝鲸（海洋哺乳动物）
      
    
    

      

        
蓝鲸简介
        
蓝鲸图片
        

          相关知识
            
          
          

            
物种分类
            
物种命名
          
        
      
    
  

#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