如何控制jQuery UI在活动链接上保持打开状态？

Question

我在这里使用jQuery UI进行侧边栏导航:http://www.imadesign.com/dev/work/

我希望能够在当前活动部分保持手风琴开放.例如,如果我在这个页面上:http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency,基础设施手风琴将继续开放.

这是html:

<div id="accordion">
<div>
<h3><a href="#">Infrastructure</a></h3>
<div>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/green_valley_ranch">Green Valley Ranch</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/irvine_spectrum">Irvine Spectrum</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/lynwood">Lynwood</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency">Inland Empire Utilities Agency</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/center_for_regenerative_studies">Center for Regenerative Studies</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/agriscapes">Agriscapes</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/sepulveda_basin_wildlife_area">Sepulveda Basin Wildlife Area</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/upper_newport_bay_regional_park">Upper Newport Bay Regional Park</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/los_angeles_world_airports">Los Angeles World Airports</a></p>
</div>  
</div>
<div>...

这是jQuery:

<script type="text/javascript">
$(function(){

    // Accordion
    $("#accordion").accordion({ header: "h3", autoHeight: false, collapsible: true, active:false });

    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); 
        });
});
</script>

任何指导将不胜感激.谢谢.

Answer 1

您可以查看任何链接的 href 中是否存在 url，然后显示相应的 div

它并不完美，但至少它是通用的，你可以根据你的需要修改它......

我做了一个小提琴：

http://jsfiddle.net/TKgsQ/1/

编辑：

这是初始化手风琴后必须放在 $(function(){ }); 中的代码

var arr = window.location.toString().split('/');
var currentUrl = arr[arr.length -1]; 
$("#accordion a").each(function(){
    arr = $(this).attr("href").split("/");
    var linkUrl = arr[arr.length -1]; //get last part
    if(linkUrl == currentUrl) 
        $(this).css('background-color','yellow').closest('div').show();
});