展开手风琴选项

问题描述

我使用下面的代码来创建一个多级菜单。唯一的暗点是我不知道如何激活一个选项。我的意思是要在特定选项中扩展的手风琴。

<div class="accordion">
<h1><a href="">No Sub 1<span class="label label-info" style="float:right;">17</span></a></h1>
<h1>With Sub<i class="fa fa-angle-down" aria-hidden="true" style="margin-left:8px;"></i><span class="label label-info" style="float:right;">17</span></h1>
<div>
    <h2>With Sub-Sub<i class="fa fa-angle-down" aria-hidden="true" style="margin-left:8px;"></i><span class="label label-info" style="float:right;">17</span></h2>
    <div>
        <h3>With Sub-Sub-Sub<i class="fa fa-angle-down" aria-hidden="true" style="margin-left:8px;"></i><span class="label label-info" style="float:right;">17</span></h3>
        <div>
            <h4><a href="">Final level 1<span class="label label-info" style="float:right;">17</span></a></h4>
            <h4><a href="">Final level 2<span class="label label-info" style="float:right;">17</span></a></h4>
            <h4><a href="">Final level 3<span class="label label-info" style="float:right;">17</span></a></h4>
        </div>
        <h3><a href="">Without Sub-Sub-Sub<span class="label label-info" style="float:right;">17</span></a></h3>
    </div>
    <h2><a href="">No Sub-Sub<span class="label label-info" style="float:right;">17</span></a></h2>
</div>
<h1><a href="">Without Sub 2<span class="label label-info" style="float:right;">17</span></a></h1>

$(document).ready(function() {
    var headers = ["H1","H2","H3","H4","H5","H6"];
    $(".accordion").click(function(e) {
        var target = e.target,name = target.nodeName.toupperCase();

        if($.inArray(name,headers) > -1) {
            var subItem = $(target).next();

            //slideUp all elements (except target) at current depth or greater
            var depth = $(subItem).parents().length;
            var allAtDepth = $(".accordion p,.accordion div").filter(function() {
                if($(this).parents().length >= depth && this !== subItem.get(0)) {
                    return true; 
                }
            });
            $(allAtDepth).slideUp("fast");

            //slidetoggle target content and adjust bottom border if necessary
            subItem.slidetoggle("fast",function() {
                $(".accordion :visible:last").css("border-radius","0 0 0px 0px");
            });
            $(target).css({"border-bottom-right-radius":"0","border-bottom-left-radius":"0"});
        }
    })
});

有没有人知道一种方法可以使 href 中的一个处于活动状态，这意味着父 div 将被扩展？

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accordion jquery