0

I want to create Clickable menu i have 5 buttons which is mansion in li tags and link holder class out side the li tags i need that. I want when i click on any link so that button is highlight and menu is open as slide-down and i click on another button so previous one is normal and menu slid-up and clickable link is slide-down and again click same link so menu is slide-up and link is normal.

JS Code

 $(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 CODE

 #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;}

This Is the working link

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

4

2 回答 2

0

试试这个

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

演示

于 2013-09-12T12:14:11.050 回答
0

在这里试试这个演示

 $(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();

               } 


          });




            });
于 2013-09-12T12:20:35.857 回答