0

我需要更改选定的子菜单背景颜色。但是,当我单击子菜单时,我不知道如何更改背景颜色。

jsfiddle:http: //jsfiddle.net/BJQ6y/

我的CSS代码:

            .menuContent {  background-image:url("../images/new.png");  border:1px solid #C7C7C7;   bottom: 0px;    position: fixed;    width:100%;     margin: 0 auto;     text-align: center;     -moz-border-radius-topright: 10px;  -moz-border-radius-topleft: 10px;   border-top-right-radius: 10px;  border-top-left-radius: 10px;   -moz-box-shadow: 3px -3px 5px #B8B8B8;  -webkit-box-shadow: 3px -3px 5px #B8B8B8;   box-shadow: 3px -3px 5px #B8B8B8; }
            .menuContent a.slider {     background-color:#fff;  background-image: -moz-linear-gradient(center top, #ddd, #FFF);     background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF));    border: 1px solid #C7C7C7;  border-bottom:none;     cursor: pointer;    float:right;    height: 8px;    margin:-15px 30px 0 0;  padding:3px 20px;   width: 8px;     z-index: 2001;  -moz-border-radius-topright: 7px;   -moz-border-radius-topleft: 7px;    border-top-right-radius: 7px;   border-top-left-radius: 7px;    -moz-box-shadow: 3px -2px 3px #B8B8B8;  -webkit-box-shadow: 3px -2px 3px #B8B8B8;   box-shadow: 3px -2px 3px #B8B8B8;  }
            .menuContent a.slider img {     padding-bottom: 3px; }
            #nav {  list-style: none;   padding: 0px;   margin: 0px; }
            #nav li {   display: inline-block;  background: #222; }
            #nav li a {     color:#858585;  font-weight: bold;  display: block;     padding: 15px 25px;     text-align:center;  text-decoration:none;   width: auto;    -moz-border-radius-bottomright: 10px;   -moz-border-radius-topleft: 10px;   text-transform:uppercase;   min-width: 125px; }
            #nav li li a {  padding: 10px 5px;  text-align: left; }
            #nav li li li a {   padding: 7px 5px;   text-align: left; } 
            #nav li ul {    background: #333;   margin: 0px;    padding: 0px; }
            #nav li a:hover, #nav li a.active, #nav li a.sel {  background-color:#fff;  color: #222; }
            #nav li ul {    display:none; } 
            #nav li ul li {     background: #CCC; }
            #nav li ul li ul{   background: #222; }

            #nav li ul li li {  background: #600; }
            #nav li ul li {     margin: 5px 0;  display: block; }
            #nav li a img {     border-width: 0px;  margin-right: 8px;  vertical-align: middle; }
            #nav ul li a img {  background: url("../images/bulb.png") no-repeat;    border-width:0px;   height:16px;    line-height:22px;   vertical-align:middle;  width:16px; } 
            #nav li ul li {     border-bottom: 1px solid #ccc; }
            #nav li li ul {     margin-left: 25px; }

我的 Html CLde

                <!DOCTYPE html>
                <html lang="en" >
                <head>
                <meta charset="utf-8" />
                <title>Bharatanatyam</title>


                <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
                <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

                <script>

                            $(function(){
                                $('.slider').click(function () { 
                                    $('#nav').slideToggle(300);

                                    var img = $(this).find('img');
                                    if ($(img).attr('id') == 'bot') {
                                        $(img).attr('src', 'images/arrow_top.png');
                                        $(img).attr('id', 'top');
                                    } else {
                                        $(img).attr('src', 'images/arrow_bottom.png');
                                        $(img).attr('id', 'bot');
                                    }
                                });

                                $('.sub').click(function () { 
                                    var cur = $(this).prev();
                                    $('#nav li ul').each(function() {
                                        if ($(this)[0] != $(cur)[0])
                                            $(this).slideUp(300);
                                    });
                                    $(cur).slideToggle(300);
                                });


                                $('.sub_menu').click(function () { 
                                    var cur = $(this).prev();
                                    $('#nav li li ul').each(function() {
                                        if ($(this)[0] != $(cur)[0])
                                            $(this).slideUp(300);
                                            //$(this).css("background", "red");
                                    });
                                    $(cur).slideToggle(300);
                                });


                            });
                            </script>

                </head>
                <body>
                <div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
                  <ul id="nav">
                    <li>
                      <ul id="1">
                        <li>
                          <ul id="2">
                            <li><a href="#">Profile</a></li>
                            <li><a href="#">Presentations</a></li>
                            <li><a href="#">Recitals</a></li>
                            <li><a href="#">Awards</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Media</a></li>
                            <li><a href="#">Calendar</a></li>
                            <li><a href="#">downloads</a></li>
                          </ul>
                          <a href="#" class="sub_menu">Bharatanatyam</a></li>
                        <li>
                          <ul id="3">
                            <li><a href="#">Profile</a></li>
                            <li><a href="#">Presentations</a></li>
                            <li><a href="#">Recitals</a></li>
                            <li><a href="#">Awards</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Media</a></li>
                            <li><a href="#">Calendar</a></li>
                            <li><a href="#">downloads</a></li>
                          </ul>
                          <a href="#" class="sub_menu">Kuchipudi</a></li>
                      </ul>
                      <a href="#" class="sub sel" tabindex="1">Sailaja</a> </li>
                    <li>
                      <ul id="4">
                        <li><a href="#">About Sailasudha</a></li>
                        <li><a href="#">Admission</a></li>
                        <li><a href="#">Presentation</a></li>
                        <li><a href="#">Recticals</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Media</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Downloads</a></li>
                      </ul>
                      <a href="#" class="sub" tabindex="1">Sailasudha</a> </li>
                    <li>
                      <ul id="5">
                        <li><a href="#">Philosophy</a></li>
                        <li>
                          <ul id="6">
                            <li><a href="#">Artist</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Media</a></li>
                          </ul>
                          <a href="#" class="sub_menu" >Year 1</a></li>
                        <li><ul id="7">
                            <li><a href="#">Artist</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Media</a></li>
                          </ul><a href="#" class="sub_menu" >Year 2</a></li>
                        <li><ul id="8">
                            <li><a href="#">Artist</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Media</a></li>
                          </ul><a href="#" class="sub_menu" >Year 3</a></li>
                        <li><ul id="9">
                            <li><a href="#">Artist</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Media</a></li>
                          </ul><a href="#" class="sub_menu" >Year 4</a></li>
                        <li><ul id="10">
                            <li><a href="#">Artist</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Media</a></li>
                          </ul><a href="#" class="sub_menu" >Year 5</a></li>
                        <li><a href="#">Artist</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Media</a></li>
                      </ul>
                      <a href="#" class="sub" tabindex="1">Nrityanasangama</a> </li>
                    <li><a href="#">Contact Us</a></li>
                  </ul>
                </div>
                </body>
                </html>

我的疑问:

当我单击“Kuchipudi”菜单时,它的子菜单将打开。届时“Kuchipudi”背景将更改为所选菜单。

当我单击“Bharatanatyam”菜单时,它的子菜单将打开。那时“Kuchipudi”背景将像以前一样改变,“Bharatanatyam”背景颜色将随着所选菜单而改变。我不知道如何改变,它的背景颜色改变。

4

1 回答 1

1

这个编辑你的小提琴工作:

$('.sub_menu').click(function () { 
     $('a.submenu').removeClass('selected');
     $(this).addClass('selected');

     var cur = $(this).prev();
     $('#nav li li ul').each(function() {
         if ($(this)[0] != $(cur)[0])
             $(this).slideUp(300);
         });
     $(cur).slideToggle(300);
     );

然后添加这个 CSS:

.selected{background-color:#eee; //or whatever colour
于 2013-08-16T12:07:01.880 回答