高亮子菜單點擊jQuery中（摺疊式菜單）

Question

<ul class="acd" > 
    <li class="item1"> 
     <a href="#">Parent 1</a> 
     <ul class="smenu"> 
      <li><a href="subpage1">Child 1</a></li> 
      <li><a href="subpage2">Child 2</a></li>  
     </ul> 
    </li> 
    <li class="item2"> 
     <a href="#">Parent 2</a> 
     <ul class="smenu"> 
      <li><a href="subpage3">Child 1</a></li> 
      <li><a href="subpage4">Child 2</a></li>  
     </ul> 
    </li> 
</ul> 

Jquery: 
<script type="text/javascript"> 

    $(document).ready(function() { 

      // initialize accordion 
      $('.acd ul').each(function() { 

       var currentURI = window.location.href; 
       var links = $('a', this); 
       var collapse = true; 
       for (var i = 0; i < links.size(); i++) { 
        var elem = links.eq(i); 
        var href = elem.attr('href'); 
        var hrefLength = href.length; 
        var compareTo = currentURI.substr(-1*hrefLength); 

        if (href == compareTo) { 

         collapse = false; 
         break; 
        } 
       }; 
       if (collapse) { 
        $(this).hide(); 
       } 
      }); 


      // on click, show this element and hide all others 

      $('.acd > li').click(function() { 

       var me = $(this).children('ul');      
       $('.acd ul').not(me).slideUp('normal'); 
       me.slideDown('normal'); 

      }); 




}); 

</script> 

CSS時，父菜單：

.acd, 
.acd ul, 
.acd li, 
.acd a, 
.acd span { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
border-radius: 2px; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 

} 



.acd li { 
    list-style: none; 
} 


.acd li > a { 
    display: block; 
    position: relative; 
    min-width: 110px; 
    padding: 0 10px 0 40px; 

    color: #fdfdfd; 
    font: bold 12px/32px Arial, sans-serif; 
    text-decoration: none; 
    text-shadow: 0px 1px 0px rgba(0,0,0, .35); 

    background: #616975; 
    background: -moz-linear-gradient(top, rgb(114, 122, 134) 0%, rgb(80, 88, 100) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(114, 122, 134)), color-stop(100%,rgb(80, 88, 100))); 
    background: -webkit-linear-gradient(top, rgb(114, 122, 134) 0%,rgb(80, 88, 100) 100%); 
    background: -o-linear-gradient(top, rgb(114, 122, 134) 0%,rgb(80, 88, 100) 100%); 
    background: -ms-linear-gradient(top, rgb(114, 122, 134) 0%,rgb(80, 88, 100) 100%); 
    background: linear-gradient(top, rgb(114, 122, 134) 0%,rgb(80, 88, 100) 100%); 

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
} 

.acd li > a span { 
    display: block; 
    position: absolute; 
    top: 7px; 
    right: 0; 
    padding: 0 10px; 
    margin-right: 10px; 

    font: normal bold 12px/18px Arial, sans-serif; 
    background: #404247; 

    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 

    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
} 

.smenu li a { 
    color: #878d95; 
    text-shadow: 1px 1px 0px rgba(255,255,255, .2); 

    background: #f2f2f2; 
    border-bottom: 1px solid #d6d6d6; 

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
} 

.smenu li:last-child a { border: none; } 

.smenu li > a span { 
    color: #797979; 
    text-shadow: 1px 1px 0px rgba(255,255,255, .2); 
    background: transparent; 
    border: 1px solid #c9c9c9; 

    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
} 

.smenu em { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin-left: 14px; 
    color: #a6a6a6; 
    font: normal 10px/32px Arial, sans-serif; 
} 



.acd > li:target > a, 
.acd > li > a.active { 
    color: #00121c; 
    text-shadow: 1px 1px 1px rgba(255,255,255, .2); 

    /*background: url(../img/active.png) repeat-x;*/ 
    background: #0088cd; 
    background: -moz-linear-gradient(top, #0088cd 0%, #00669a 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cd), color-stop(100%,#00669a)); 
    background: -webkit-linear-gradient(top, #0088cd 0%,#00669a 100%); 
    background: -o-linear-gradient(top, #0088cd 0%,#00669a 100%); 
    background: -ms-linear-gradient(top, #0088cd 0%,#00669a 100%); 
    background: linear-gradient(top, #0088cd 0%,#00669a 100%); 
} 


.smenu li:hover a { background: #f7f7f7; } 



.acd li > .smenu { 
    display: block; 
} 

.acd li:target > .smenu { 
    display: block; 
} 

我想手風琴菜單落下，並強調母公司被點擊子菜單時，下拉菜單應該保持對父母li突出顯示的點擊鏈接開放。如果我點擊父母沒有孩子的父母鏈接，高亮將在父母身上。

Answer 1

爲了突出顯示父級，請在CSS中添加一個名爲highlight的類。

.highlight{ 
    box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3 !important; 
} 

現在，當任何特定父元素的子元素被點擊時，該類將被添加。

$('.smenu > li>a').click(function() { 
       $(this).closest("ul").siblings('a').addClass('highlight'); 
      }); 

而且，這個類添加到其父母有沒有孩子

if($(this).has('ul').length==0){ 
     $(this).children('a').addClass('highlight'); 
     } 

這裏是一個演示小提琴：http://jsfiddle.net/rrh1c5d8/1/

P.S：根據你的需求亮點的變化CSS。