jquery - 带有jquery的可点击菜单

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代码

 <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

试试这个 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();

               } 


          });




            });