2011-12-27 5 views
2

Я новичок в jquery. Я работаю над навигацией jquery в течение стольких дней, теперь он отлично работает, но я хочу добавить к нему больше возможностей.JQuery Accordion Несколько уровней навигации

У меня есть трехуровневая аккордеонная навигация, и я хочу, чтобы пользователь знал, в каком разделе они находятся, применяя цвет фона к нему, теперь я могу только установить цвет фона на последний уровень, на котором они находятся, как могу ли я также применить другой цвет фона к родительскому уровню.

<div id="accordion"> 
    <h3><a>Link One - First Level</a></h3> 
    <div class="accordionSecond">  
     <h6><a href="#">Second Level</a></h6> 
     <div class="accordionLink"> 
     <a href="1.html">1.html</a> 
     <a href="2.html">2.html</a> 
     <a href="3.html">3.html</a> 
     <a href="4.html">4.html</a> 
     </div> 
    </div> 

    <h3><a>Link Two - First Level</a></h3> 
    <div class="accordionSecond">  
     <h6><a href="#">Second Level</a></h6> 
     <div class="accordionLink"> 
     <a href="1.html">1.html</a> 
     <a href="2.html">2.html</a> 
     <a href="3.html">3.html</a> 
     <a href="4.html">4.html</a> 
     </div> 
    </div>  

</div> 

вот CSS линия, чтобы применить цвет фона на уровне они находятся на код заголовка

.accordionSecond .activeLink { background: #ccc; color:#000!important; } 

Jquery здесь

<script> 
    $(document).ready(function() { 
    $("#accordion").accordion({active: true, collapsible: true, header: "h3", autoHeight: false, navigation: true, event: 'mouseup'}); 
    $(".accordionSecond").accordion({active: true, collapsible: true, header: "h6", autoHeight: false, navigation: true,event: 'mouseup'}); 
    }); 
    </script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    var path = location.pathname; 
     jQuery("a[href$='" + path + "']").addClass("activeLink"); 
}); 

благодаря

ответ

0

Привет Совершите посмотрите на click api, который демонстрирует также добавление класса (скажем, вы добавили «acti» ve 'в заголовок, который вы нажали) и поведение, которое вы запрашиваете. Очевидно, вам придется расширять эту демонстрацию, но должен быть много примеров добавления и удаления классов в Интернете.

+0

спасибо Tom, еще один вопрос –

+0

Я попытался добавить класс, он добавит класс во весь заголовок, как только вы нажмете на него. Я не думаю, что этот метод работает. –

+0

Редактируйте свой вопрос с помощью нового кода, который вы пытались угадать, кажется, что вы не выбрали элемент 'this' –

Смежные вопросы