機能は2回目のクリックでのみ機能し、正常に機能しますか？

Question

私が作成したナビゲーションメニューに問題があります。基本的に、ナビゲーションはいくつかのタブで構成されています。タブは、ボタンをクリックすると折りたたまれ、そのボタンを再度クリックすると展開されます。折りたたまれていると、タブの端はまだ見えていて、上にマウスを置くとタブが外に出て、ホバリング時に戻ります。

<ul id="navigation"> 
<li><a href="../name1/">Name1</a></li> 
<li><a href="../name2/">Name2</a></li> 
<li><a href="../name3/">Name3</a></li> 
<li id = "collapser"><a href = "javascript:void(0)">Collapse All</a></li> 
</ul> 

そして私は次のjQuery/Javascriptをこれを行うにレイアウトされています：

だから私は、次のナビゲーションレイアウトされている

が

  $("#collapser").click(function(){ 
      if($("#collapser").hasClass("clicked")){ 
       $(function() { 
        $('#navigation a').stop().animate({'marginLeft':'-118px'},1000); 

        $('#navigation > li').hover(
         function() { 
          $('a',$(this)).stop().animate({'marginLeft':'0px'},400); 
         }, 
         function() { 
          $('a',$(this)).stop().animate({'marginLeft':'-118px'},400); 
         } 
        ); 
       }); 
       $("#collapser").removeClass("clicked"); 
       $("#collapser").addClass("unclicked"); 
       $("#collapser").html('<a href = "javascript:void(0)">Expand All</a>') 
      } 
      else{ 
       $(function() { 
        $('#navigation a').stop().animate({'marginLeft':'0px'},1000); 

        $('#navigation > li').hover(
         function() { 
          $('a',$(this)).stop().animate({'marginLeft':'0px'},400); 
         }, 
         function() { 
          $('a',$(this)).stop().animate({'marginLeft':'0px'},400); 
         } 
        ); 
       }); 
       $("#collapser").removeClass("unclicked"); 
       $("#collapser").addClass("clicked"); 
       $("#collapser").html('<a href = "javascript:void(0)">Collapse All</a>') 
      } 
     }) 

コードが動作するのが、唯一のあなたは、クリックしたときリンクは2回目です。私はそれを一度それをクリックした後にのみ動作させるために何をしたのか分かりません。

何か助けていただければ幸いです。ありがとうございます！

-Quintin EDIT：ここ は、ナビゲーションのためのCSSです：

ul#navigation { 
position: fixed; 
margin: 0px; 
padding: 0px; 
font-size:14px; 
top: 14px; 
left: 0px; 
list-style: none; 
z-index:9999;} 

ul#navigation li { 
width: 100px; 
} 

ul#navigation li a { 
display:block; 
margin-bottom:3px; 
width:126px; 
padding:3px; 
padding-left:15px; 
background-color:#ffffff; 
background-repeat:no-repeat; 
background-position:center center; 
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
-moz-box-shadow: 0px 1px 3px #000; 
-webkit-box-shadow: 0px 1px 3px #000; 
} 

ul#navigation .checked a{ 
color:#ffffff; 
background-color:#000000; 
} 

Answer 1

あなたcollapserにdiv要素がクリックされたクラスやunclickedを持っているか、いない場合は検証されていますが、あなたには、いくつかのクラスでdiv要素を初期化できません。クラスを追加すると、あなたの効果を調整する必要がありますクリック：

<li id = "collapser" class='clicked'><a href = "javascript:void(0)">Collapse All</a></li> 

あなたはこのjsfiddle