如何使適當的jQuery滑動下拉菜單？

Question

你好朋友！

我有問題，與它的工作原理slide down菜單時，我最初點擊button（圖）這是<a id="js-cat" class="js-cat"></a>，但它slides down並立即slides up再次，這是我沒有計劃這樣做。例如，我的目標是讓它響應。如果用戶點擊該圖片，則應該滑動一下，如果用戶點擊兩次，則應該再次滑動。

請大家我需要你的幫助。我幾乎不想這樣做，但最終我無法讓我的代碼工作。

這裏是我的HTML：

<a id='js-mnu' class='js-mnu'></a> 
<a id="js-cat" class="js-cat"></a> 

CSS

#js-cat {display:block;display:block;width:35px;height:35px;margin:17px 10px; position: absolute; 
right: 0;} 
.js-cat {background:url(images/cat.png) center center no-repeat;opacity:0.75;} 

和jQuery：

$(document).ready(function(){ 
    $("#js-cat").click(function(){ 
     $('ul.catalog').slideDown(); 
    }); 
    $("#js-cat").click(function(){ 
     $('ul.catalog').slideUp(); 
    }); 
}); 

Answer 1

你兩次結合的Click事件。你應該只綁定一次，並檢查菜單是否隱藏或不能上下滑動。

$(document).ready(function() { 
 
    $("#js-cat").click(function() { 
 
    var isHidden = $(".menu").is(":hidden"); 
 
    if (isHidden) { 
 
     $('.menu').slideDown(); 
 
    } else { 
 
     $('.menu').slideUp(); 
 
    } 
 
    }); 
 

 

 
});

body { 
 
    margin: 10px; 
 
} 
 

 
.menu { 
 
    margin: 10px 0; 
 
    background: #abcdef; 
 
    width: 250px; 
 
    padding: 10px; 
 
} 
 

 
a { 
 
    cursor: pointer; 
 
    border: 1px solid #555; 
 
    background: #fafafa; 
 
    color: #555; 
 
    padding: 10px; 
 
    display: inline-block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a id="js-cat" class="js-cat">Click</a> 
 

 
<div class="menu">Content: Lorem ipsum</div>