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

您正在验证您的collapser div是否已点击或未点击该类，但您没有使用某个类初始化div。添加单击的类应调整效果：

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

您可以使用此jsfiddle

查看

功能只适用于第二次点击，然后工作正常？

1 个答案: