適切なjQueryスライドダウンメニューを作成するには？

Question

こんにちは！

私が最初に私が何を計画していないいる、それが動作<a id="js-cat" class="js-cat"></a>ですが、再度slides downとすぐslides upbutton（画像）をクリックしたとき、私はslide downメニューの問題を抱えています。私の目標は、例えばそれを反応させることです。ユーザーがbutton（画像）を一度クリックすると、それが滑り落ちるはずです。また、ユーザーがそれを2回クリックすると再び滑ります。

私はあなたの助けが必要です。私はほとんどそれをやろうとしていませんでしたが、結局私は自分のコードを動作させることができません。

<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

は、ここに私のHTMLです。一度だけバインドして、メニューが隠れているかどうか、またはスライドアップしたり下ろしたりしないでください。

$(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>