当用户点击“Category”时，如何让我的代码关闭下拉菜单？

Question

http://jsfiddle.net/83vtn5h7/

点击“类别”打开菜单。现在，如果再次单击“类别”，预期的结果将是菜单关闭。相反，它会关闭，但很快会再次打开！我无法在代码中找到导致此错误的原因。请协助。

我认为在ActiveListItem（ActiveListItem =“Category”，除非选择另一个项目）上有“slideToggle”将是正确的代码，但它不起作用。

HTML

 <div id="navbarcontainer"> 
      <ul class="navbar"> 
       <li> 
        <span class="ActiveListItem">Category</span> 
        <ul> 
         <li><span>Music</span></li> 
         <li><span>Movie</span></li> 
         <li><span>Book</span></li> 
         <li><span>TV</span></li> 
         <li><span>Game</span></li> 
         <li><span>Activity</span></li> 
         <li><span>Misc</span></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

CSS

#navbarcontainer{ 
    vertical-align:top; 
    display:inline-block; 
} 


/* navbar */ 


ul.navbar { 
    border-style:solid; 
    border-width:1px; 
    border-color:#739FE0; 
    width:100px;     
    border-radius:4px; 
    height:33px; 
} 


ul.navbar li span.ActiveListItem { 
    background:url("http://i.imgur.com/p0qeihf.png") !important; 
    background-repeat:no-repeat !important; 
    background-size:10px 10px !important; 
    background-position:83px 13px !important; 
    color:white; !important; 
    background-color:#222 !important; 
    padding:7.5px 0px !important; 
    font-weight:normal !important; 
    border-radius:4px; 
    height:18px; 
    width:100px; 
    margin-bottom:1px; 
} 


ul.navbar li {  
    z-index:101; 
    position:relative; 
    width:100px;       
} 


ul.navbar li span { 
     display:block; 
     color:white; 
     padding:10px 5px; 
     text-decoration:none; 
     transition:all .1s ease-in; 
} 


ul.navbar li span:hover, 
ul.navbar li:hover > span { 
    background:#739FE0; 
    color:#FFFFFF; 
    cursor:pointer; 
} 


ul.navbar li ul { 
    margin-top:0px;    
    background:#222; 
    display:none; 
    box-shadow:inset 0 0px 3px rgba(0,0,0,.6), 
        0 5px 10px rgba(0,0,0,.6); 
} 


ol, ul { list-style:outside none none; } 

jQuery的

var container = $('.navbar'); 
$(document).on('click', '.ActiveListItem', function(event) { 
    $('.navbar li ul').slideToggle(300); 
    $('.navbar > li:first-child > span').text("Category"); 
}); 

$(document).on('click', '.navbar ul span', function(event) { 
    $("#input1").focus(); 
    $('.navbar li ul').slideUp(300); 
    $('.navbar > li:first-child > span').text($(this).text()); 
}); 

$(document).mouseup(function (e) { 
    if (!container.is(e.target) // if the target of the click isn't the container... 
    && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     $('.navbar li ul').slideUp(300); 
    } 
}); 

Answer 1

只需将的toogle事件之前增加stop()：

$(document).on('click', '.ActiveListItem', function(event) { 
    $('.navbar li ul').stop().slideToggle(300); 
    $('.navbar > li:first-child > span').text("Category"); 
}); 

请发现FIDDLE更新