首页 文章

嵌套Bootstrap折叠（手风琴）

提问于
浏览 次
0

我正在实施Bootstrap 3.3.7 Collapse（accordion） . 我复制了示例here .

我通过添加插入符并将文本移出锚点来修改面板 Headers 部分，以便只有插入符号可以响应崩溃事件：

<h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#sub-role-1_sub-role-1-accordion" href="#collapse-sub-role-1_sub-role-1" aria-expanded="true" aria-controls="collapse-sub-role-1_sub-role-1">
        <span class="caret caret-mr"></span>
    </a>Sub Role 1
</h4>

我还添加了自定义JS和CSS，以便在单击折叠时使插入符号上升（dropup）：

var collapseList = $('.panel .panel-collapse');
collapseList.each(function() {
    var collapseId = $(this).attr('id');
    $('#' + collapseId).on('show.bs.collapse', function() {
        $(this).prev('.panel-heading').find('.panel-title > a').addClass('dropup');
    }).on('hide.bs.collapse', function() {
        $(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
    });
});

.panel .panel-heading>.panel-title>a>span.caret {
    border-top: 6px solid black;
}

.panel .panel-heading>.panel-title>a.dropup>span.caret {
    border-bottom: 6px solid black;
    border-top: none;
}

我已经更改了所有ID和所有其他数据属性以避免冲突 .

除了嵌套式手风琴（手风琴琴身内的手风琴）之外，这完美无缺 . 目前，我有三级嵌套手风琴 . 问题是嵌套手风琴也会影响到根手风琴的父母 - 他们的插入符号也会下降或下拉 . 第二个手风琴（嵌套）影响第一个，第三个影响第二个和第一个 .

完整代码：GitHub Gist

感谢帮助 .

jquery css twitter-bootstrap-3 accordion collapse

2 回答

  • 2
    collapseList.each(function() {
var collapseId = $(this).attr('id');
$('#' + collapseId).on('show.bs.collapse', function() {
    $(this).closest('.panel').find('.panel-heading').find('.panel-title > a').addClass('dropup');
}).on('hide.bs.collapse', function() {
    $(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
});
 });

    您可以试试这个，如果没有修复，请分享您编写的面板的html代码 .

    回复于
  • 0
    span[aria-expanded="true"] i::before {
        content: "\f106";
    }

    .uner {
        margin: 0 50px 15px;
    }
    #collapse1 {
        border:1px solid #dedede;
        border-top:0px;
    }

    <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>

    <div class="container">
        <h2>Accordion Example</h2>
        <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a>Collapsible Group 1</a>
                        <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-angle-down"></i></span>
                    </h4>
                </div>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a>Sub Collapsible Group 1.1</a>
                                    <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-angle-down"></i></span>
                                </h4>
                            </div>
                            
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                                <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
                            </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a>Sub Collapsible Group 1.2</a>
                                    <span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse3"><i class="fa fa-angle-down"></i></span>
                                </h4>
                            </div>
                            
                        </div>
                        <div id="collapse3" class="panel-collapse collapse">
                                <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
                            </div>
                    </div>


                </div>
                

        </div>
    </div>

</body>

</html>
    回复于

相关问题