功能僅在第二次單擊時有效，然后可以正常工作嗎？

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>')
             }
         })

該代碼有效，但僅當您再次單擊該鏈接時。 僅在單擊一次之后，我似乎無法弄清楚如何使它起作用。

任何幫助將不勝感激，非常感謝！ -Quintin

編輯：這是導航的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

您正在驗證您的折疊器div是否單擊或未單擊該類，但是沒有使用某個類初始化div。 添加單擊的類應調整效果：

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

您可以通過此jsfiddle看到它