选择时,手风琴会显示活动的li

时间:2013-08-14 13:56:20

标签: jquery accordion jquery-ui-accordion

我需要手风琴的帮助,保持“li”打开,以在每个页面加载中显示所选菜单。每次点击链接时我都会关闭代码。我需要一个代码,它将保持“li”打开以显示活动链接。 请帮我。 这是我的代码:

<ul id="accordion">
    <li><a href="#">Individual Inventory</a></li>
    <ul class="submenu">
        <li><a href="?page=records" title="">Individual Inventory Records</a></li>
        <li><a href="?page=repo" title="">Records</a></li>
    </ul>

    <li><a href="#">Exit Interview</a></li>
    <ul class="submenu">
        <li><a href="?page=ir">Inventory Records</a></li>
        <li><a href="?page=sweet">sweet</a></li>
    </ul>
</ul>

:CSS

#accordion {

    list-style: none;
    padding: 0 0 0 0;
    width: 250px;
}
#accordion li{
    display: block;
    background:#024b9a url(../images/img05.jpg) repeat;
    margin: auto;
    cursor: pointer;
    padding-top:10px;
    list-style: circle;
    color:#ffffff;
    text-align: center;
    height:5px;
}
#accordion li:hover{
    opacity:0.8;
    filter:alpha(opacity=80);
}
#accordion li:active{
    opacity:0.8;
    filter:alpha(opacity=80);
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
    display: none;

}
#accordion ul li{

    background:#ffffff;
    font-weight: normal;
    cursor: auto;
    padding: 5px 0 10px 7px;
    height:10px;
}
#accordion ul li:hover{
    background:url(../images/img052.jpg) repeat;
}
#accordion a {
    text-decoration: none;
    color;#000;
    padding:10px;
    font-family:Verdana, Geneva, sans-serif;
}
#accordion a:hover {
    color;#000;
}

jquery的:

$("#accordion > li ").click(function() {        
  if(false == $(this).next().is(':visible')) {
    $('#accordion > ul').slideUp(300);
  }
  $(this).next().slideToggle(300);
});

2 个答案:

答案 0 :(得分:0)

这样的事情可能比:

$(function () {

    $("#accordion > li > a:active").parent().next().show();

});

答案 1 :(得分:0)

这将打开每个页面加载时打开的所有手风琴li /标签。这样你就可以看到活跃的链接

var activateAccord = function(){

$('ul.submenu').each(function () {
    $(this).prev('li')
    .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
    .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
    .next().slideToggle();
  })

}

activateAccord();