Question

我想创建可点击菜单我有5个按钮，这是Li标签中的豪宅，链接保持器类外面是我需要的li标签。我希望当我点击任何链接，以便按钮突出显示，菜单打开时向下滑动，我点击另一个按钮，这样前一个是正常的，菜单滑动，可点击的链接向下滑动，再次单击相同的链接，菜单上滑，链接正常。

JS代码

 $(document).ready(function(e) {
$("#nav li a",this).click(function() {
               if ($(this).hasClass("bt")) {
                   $(this).removeClass("bt");
                   $(this).addClass("clicked");
                   $(".link_holder").slideDown();
               } else {
                    $(this).removeClass("clicked");
                   $(this).addClass("bt");
                  $(".link_holder").slideUp();
                }


          });
   });

HTML CODE

 <div id="nav">

    <ul>
    <li><a href="#" class="bt">File</a></li>
    <li><a href="#" class="bt">Action</a></li>
    <li><a href="#" class="bt">Modules</a></li>
    <li><a href="#" class="bt">Reports</a></li>
    <li><a href="#" class="bt">Help</a></li>
    </ul>


</div>

 <div class="link_holder"></div>    

 <div class="quick_links"></div>

CSS代码

 #nav{min-height:27px; background:url(../images/nav_bg.jpg) repeat-x         #afc1d8;clear:both; border-bottom:solid 1px #8f9eb0}
#nav ul{ margin:0 0 0 50px;}
#nav li{float:left;}
#nav li .bt{color:#253c46; text-decoration:none; padding:5px 15px; border-right:solid 1px #6f86a4; float:left;}
#nav li .bt:hover{ color:#97a3b3; background:url(../images/nav_bg_H.jpg) repeat-x; }
#nav li .clicked{text-decoration:none; padding:5px 15px; border-right:solid 1px #6f86a4; float:left; color:#97a3b3; background:url(../images/nav_bg_H.jpg) repeat-x;}


.link_holder{ background:url(../images/sub_menu.jpg) repeat-x; height:138px; clear:both; display:none; }

.quick_links{background:#C4C4C4; clear:both; min-height:30px;}

这是工作链接

http://jsfiddle.net/Abhinav/etmd9/

Answer 1

试试这个

$(this).toggleClass('clicked')
       .closest('ul')
       .find('a')
       .not(this)
       .removeClass('clicked');

DEMO

Answer 2

试试 DEMO HERE

 $(document).ready(function(e) {
$("#nav li a").click(function() {
               if ($(this).hasClass("bt")) {
                   $("*").addClass("bt");
                   $(this).removeClass("bt");
                   $("*").removeClass("clicked");
                   $(this).addClass("clicked");
                   $(".link_holder").slideUp();
                   $(".link_holder").slideDown();

               } 


          });




            });

带有jquery的可点击菜单

2 个答案: