Вложенный Bootstrap Collapse (Аккордеон) - PullRequest
Новая
       41

Вложенный Bootstrap Collapse (Аккордеон)

0 голосов
/ 17 мая 2018

Я реализую Bootstrap 3.3.7 Collapse (аккордеон). Я скопировал пример здесь .

Я изменил часть заголовка панели, добавив каретку и переместив текст из привязки так, чтобы клик мог нажимать только тот каркас, который отвечал бы на событие свертывания: 

<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, чтобы каретка поднималась (выпадала) при нажатии, чтобы свернуть: 

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;
}

Я изменил все идентификаторы и все остальные атрибуты данных, чтобы избежать конфликтов.

Это прекрасно работает, за исключением вложенного аккордеона (аккордеона внутри тела аккордеона). В настоящее время у меня есть три уровня вложенных аккордеонов. Проблема в том, что вложенный аккордеон влияет и на родителя вплоть до корневого аккордеона - их каретки также выпадают или выпадают. Второй аккордеон (вложенный) влияет на первое, третий - на второе и первое.

Полные коды: GitHub Gist

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018 

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>
0 голосов
/ 17 мая 2018 
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-кодом для панели, которую вы написали.

...