2011-12-27 78 views
2

我是jquery的新手。我在jQuery导航上工作了这么多天,现在工作正常,但我想添加更多的功能。Jquery手风琴多级导航

我有三级嵌套的手风琴导航,我想让用户知道他们在哪一节上应用背景颜色,现在我只能将背景颜色放到最后一级,如何我也可以将不同的背景颜色应用于父级别。

<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

谢谢汤姆,另一个问题 – 2011-12-28 16:32:50

+0

我试着添加类,它会将类添加到所有标题,一旦你点击一个。我不认为这种方法有效。 – 2011-12-28 17:19:54

+0

用你猜的新代码编辑你的问题,好像你没有选择'this'元素 – 2011-12-28 17:27:26