Javascript jQuery单击函数触发引导菜单向下滑动

我想通过点击下拉链接触发引导导航栏下拉菜单向下滑动。当使用jQuery的悬停函数将鼠标悬停在下拉链接上时，它确实起作用：

例如小提琴：

以下是相关的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>

这是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的hover by click函数时

$(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');       
        }
    );
});

---

，下拉菜单不会打开。我做错了什么

用小提琴更新了答案

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

---

你能为相关的HTML元素提供CSS吗？我想查看您用于隐藏/显示菜单的属性。非常感谢。另外，如果你包含了相关的CSS，可以在你的问题中使用一个更准确的代码片段。只包含了相关的CSS。我仍然无法使用JSFIDLE实现这一功能，可能缺少什么？如果你能提供一个更容易使用的工作示例。非常感谢。可能是无效语法？单击仅获取1个处理程序：虽然hoer有2个处理程序。悬停handlerIn，handlerOut Yep，因此您只需修改处理程序以切换以满足所需规则。只是尝试了一下，这并不能解决问题。下拉菜单未打开。@Schustishuster已修复该问题，请立即检查

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