jquery - JQuery toggle() は、指定されたものとは異なる div から呼び出されます

Question

こんにちは。

私は 2 つの div を持っています。1 つはサイドバーで、デフォルトでは非表示になっており、スライドで切り替えることができます。もう1つは、クリックすると非表示のバーがスライドするアイコンを含むある種のトップバーです。index.html でこれを行うことで動作させることができます。

<div id="top-toolbar">
    <div id="toggler-button"><a href="javascript:void(0)"><img src="img/gear-40px.png" /></a></div>
</div>
<div id="toggled-bar"></div>

<script>
$(document).ready(function(){       
    $("#toggler-button").click(function(){
        $("#toggled-bar").toggle("slide");
    });
});
</script>

そして私のcssは次のようになります：

#top-toolbar {
position: fixed;
width: 100%;
top:0%;
box-shadow: 3px 0px 3px black;
background-color: #FFF;
z-index: 2;
}

#toggler-button {
position: relative;
margin: 5px;
}

#toggled-bar {
position: fixed;
box-shadow: 0px 3px 3px black;
width: 200px;
height: 350px;
top: 50px;
background-color:#FFF;
display: none;
z-index: 1;
}

私はそれをここに置きましたが、どういうわけか私が意図したものとは異なり、トップバー全体をクリックしてスライドをトリガーすることができました. これは非常に初歩的な質問かもしれませんが、トップバー全体ではなく、画像がクリックされたときにのみトグルが発生するようにするにはどうすればよいでしょうか? トグルを正しくトリガーする関数を宣言していると思います。

どんな助けでも大歓迎です。