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中显示了网址，然后显示相应的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(); });

Answer 2

如果您可以保持所选手风琴项目的索引，则可以使用activate方法作为手风琴插件。你修改过的jQuery看起来像这样：

$(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'); 
        });

    $("#accordion").accordion('option', 'activate', 0);
});

这将导致第一个手风琴项目（索引0）在加载时打开。

更新：这是一个link到我放在一起的jsFiddle，展示了如何使用手风琴的activate方法。希望这有帮助！

Answer 3

尝试在链接div上添加display: block !important;。

<div style="display: block !important;">
<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>

Answer 4

来自jQuery UI Accordian documentation

注意：如果您想一次打开多个部分，请不要使用   手风琴

手风琴不允许打开多个内容面板   同时，这需要付出很多努力。如果你是   寻找允许多个内容面板的小部件   打开，不要用这个。通常它可以写几行   相反，jQuery，像这样：

jQuery的（文件）。就绪（函数（）{
        $（'。accordion.head'）。click（function（）{         $（本）。接下来（）切换（）。         返回false;     }）下一个（）隐藏（）。; }）;

或动画：

jQuery（document）.ready（function（）{$（'。accordion   .head'）。click（function（）{$（this）.next（）。toggle（'slow'）; return   假; }）下一个（）隐藏（）。; }）;

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

4 个答案: