Выделить родительское меню при нажатии подменю в Jquery (аккордеонное меню)

 <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. Если я нажму на родительскую ссылку, где у родителя нет дочернего элемента, выделение будет у родителя.


person esiaz    schedule 01.09.2014    source источник
comment
Можете ли вы создать скрипку с проблемой?   -  person artm    schedule 01.09.2014


Ответы (1)


Для выделения родителя добавьте класс с именем highlight в CSS.

.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 выделения в соответствии с вашими потребностями.

person RahulB    schedule 01.09.2014
comment
Спасибо за вашу помощь! Я попробую, как только вернусь в офис. - person esiaz; 01.09.2014
comment
Не за что. Примите ответ, если он работает для вас! - person RahulB; 01.09.2014
comment
привет, я пытался, но, кажется, нет никаких выделений ни в одном из родительских меню. Любые другие обходные пути? - person esiaz; 03.09.2014
comment
@esiaz: пожалуйста, проверьте скрипку. Как только вы выберете ребенка. родитель выделяется. И третий родитель без дочерних элементов выделяется при нажатии! - person RahulB; 03.09.2014
comment
пробовали, но подсветка класса, похоже, не применяется к относительному родителю. любые другие обходные пути? - person esiaz; 03.09.2014
comment
я меняю выделение на «активное», и теперь выделение видно. Однако выделение остается только на секунду и исчезает, когда страница загружается. - person esiaz; 03.09.2014
comment
Ожидаемое поведение, если вы измените имя класса на активное. active — это псевдокласс в css, и он будет выделен только до щелчка мыши. Лучше изменить на посещенный, если вы хотите изменить имя класса. - person RahulB; 03.09.2014
comment
Я не вижу проблем со скрипкой - jsfiddle.net/rrh1c5d8/1 работает нормально с классом подсветки. - person RahulB; 03.09.2014
comment
Привет, класс выделения заработал, однако мне нужно добавить «#» ко всем моим URL-адресам, чтобы загрузить класс выделения. И при загрузке страницы она не будет выделена, пока я не нажму на ту же дополнительную ссылку. Это довольно странно.. - person esiaz; 05.09.2014
comment
это потому, что у меня есть два разных действия $('.acd ul').each( function() { и $('.acd › li').click( function() { для которого требуется два щелчка, чтобы открыть раскрывающийся список и выделить работа? могу ли я объединить в один? - person esiaz; 05.09.2014