jquery - 在 Jquery( Accordion 菜单)中单击子菜单时突出显示父菜单

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

我希望 Accordion 菜单下拉并在单击子菜单时突出显示父项，下拉菜单应该为单击的链接保持打开状态，并突出显示父项 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');
            });  

此外，这个类被添加到没有 child 的 parent

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

这是一个演示 fiddle :http://jsfiddle.net/rrh1c5d8/1/

P.S:根据您的需要更改突出显示的 css。