javascript - jQuery点击函数触发bootstrap菜单向下滑动

Question

我想通过单击下 zipper 接来触发引导导航栏下拉菜单向下滑动。当使用 jQuery 的悬停功能将鼠标悬停在下 zipper 接上时，它确实有效:

fiddle 示例: https://jsfiddle.net/sykk7dwv/16/

以下是相关的 HTML 代码:

<div class="navbar navbar-default navbar-fixed-top">
   <div class="container">        
       <div class="navbar-header pull-left">     
         <a class="navbar-brand" href="#">Brand</a>
       </div>    
       <div class="navbar-header-menu">
         <ul class="nav navbar-nav centered-navbar">                 
           <li class="dropdown mega-dropdown active">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Link1 <span class="caret"></span>
             </a>    
             <ul class="dropdown-menu mega-dropdown-menu">
               <div class="SomeContent">
                 &nbsp Link1
                 <br>
                 &nbsp Link2
                 <br>
                 &nbsp Link3
                 <br>
               </div>
             </ul>
           </li>
         </ul>
       </div>
   </div>
</div>

CSS:

.navbar {
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.25);
}
.mega-dropdown {
  position: static !important;
  padding-left: 30px;
}
.mega-dropdown-menu {
    padding: 0px 0px !important;
    width: 100% !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.mega-dropdown-menu > li > ul {
  padding: 0 !important;
  margin: 0 !important;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none !important;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block !important;
  color: #222 !important;
  padding: 3px 5px !important;
}
.mega-dropdown-menu .dropdown-header {
  font-size: 18px !important;
  color: #ff3546 !important;
  padding: 5px 60px 5px 5px !important;
  line-height: 30px !important;
}
.navbar-collapse.collapse {
  display: block!important;
}
.navbar-nav>li, .navbar-nav {
  float: left !important;
}
.navbar-header-menu {
  float: left;
}
.navbar-header-menu > .navbar-nav {
  float: left;
  margin: 0;
} 
.navbar-header-menu > .navbar-nav > li {
  float: left;
}     
.navbar-header-menu > .navbar-nav > li > a {
   padding-top: 15px;
   padding-bottom: 15px;
}
.navbar-header-menu > .navbar-nav .open .dropdown-menu {
   position: absolute;
   float: left;
   width: auto;
   margin-top: 0;
   background-color: #fff;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.15);
   -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
}  
.navbar-header-menu > .navbar-form {
   float: left;
   width: auto;
   padding-top: 0;
   padding-bottom: 0;
   margin-right: 0;
   margin-left: 0;
   border: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
}
.navbar-header-menu > .navbar-form > .form-group {
   display: inline-block;
   margin-bottom: 0;
   vertical-align: middle;
}
.navbar-header-menu > .navbar-left {
   float: left;
}  
.navbar-header-menu > .navbar-right {
   float: right !important;
}
.navbar-header-menu > *.navbar-right:last-child {
   margin-right: -15px !important;
}

这是 jQuery 代码:

$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
            $(this).toggleClass('open');       
        }
    );
});

但是，当我用“点击”功能替换 jQuery 的“悬停”功能时

$(document).ready(function(){
    $(".dropdown").click(            
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
            $(this).toggleClass('open');       
        }
    );
});

，下拉菜单打不开。我究竟做错了什么？

Answer 1

用 fiddle 更新了答案

$(document).ready(function(){
    $(".dropdown").click(            
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideToggle("400");
            $(this).toggleClass('open');        
        }
    );
});

https://jsfiddle.net/pzcwv2cf/1/