功能仅在第二次单击时有效，然后可以正常工作吗？答案

【问题标题】：Function only works on second click, then works fine?功能仅在第二次单击时有效，然后可以正常工作吗？
【发布时间】：2012-03-06 09:40:32
【问题描述】：

我创建的导航菜单有问题。基本上，导航由几个选项卡组成，单击按钮时可折叠，再次单击该按钮时可展开。折叠时，选项卡的末端仍然可见，当您将鼠标悬停在选项卡上时，它们会退回，当鼠标悬停时会退回。

所以我有以下导航布局：

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

该代码有效，但仅当您再次单击该链接时。我似乎无法弄清楚我做了什么才能让它在点击一次后才能工作。

任何帮助将不胜感激，非常感谢！ -昆汀

编辑：这是导航的 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;
}

【问题讨论】：

您能否发布您的 CSS，或者创建一个 JSFiddle (jsfiddle.net)？
可能条件失败 if($("#collapser").hasClass("clicked")) 因为您仅在单击事件之后添加类
我确实忘记将点击的类添加到折叠器，但添加后问题仍然存在。
我明白了，这是一个错误，查看了没有分配点击类的错误页面。谢谢大家，我犯了愚蠢的错误！

标签： javascript jquery html css

【解决方案1】：

您正在验证您的折叠器 div 是否已单击或未单击该类，但您未使用某些类初始化该 div。添加点击的类应该会调整你的效果：

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

你可以通过这个jsfiddle看到它

【讨论】：

比将类添加到元素中更好的是只使用一个类。例如，不要使用unclicked。对未点击使用默认样式，并为 clicked 覆盖这些样式。