Вам понадобится немного jquery, чтобы добиться этого:
Обновление: Переключение aria-expanded атрибут
$( document ).ready( function () {
var dropToggle = $('.dropdown-menu > .dropdown-toggle');
// Click event
dropToggle.click(function(e) {
// Prevents the event from bubbling up the DOM
e.stopPropagation();
// New var 'expanded' to the check the 'aria-expanded' attribute
var expanded = $(this).attr('aria-expanded');
// Inline if to set 'aria-expanded' to true if it was false
$(this).attr('aria-expanded', expanded === 'false' ? 'true' : 'false');
// Show the next element which is your dropdown menu
$(this).next().toggleClass('show');
});
});
Пример:
$(document).ready(function() {
var dropToggle = $('.dropdown-menu > .dropdown-toggle');
// Click event
dropToggle.click(function(e) {
// Prevents the event from bubbling up the DOM
e.stopPropagation();
// New var 'expanded' to the check the 'aria-expanded' attribute
var expanded = $(this).attr('aria-expanded');
// Inline if to set 'aria-expanded' to true if it was false
$(this).attr('aria-expanded', expanded === 'false' ? 'true' : 'false');
// Show the next element which is your dropdown menu
$(this).next().toggleClass('show');
});
});
a.dropdown-toggle[aria-expanded="false"]::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
a.dropdown-toggle[aria-expanded="true"]::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: 0;
border-right: .3em solid transparent;
border-bottom: .3em solid;
border-left: .3em solid transparent;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true">Dropdown link</a>
<div class="dropdown-menu">
<a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse" title="Description">Description</a>
<div class="collapse" id="collapse">
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
</div>
<a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse1" title="Description">Description</a>
<div class="collapse" id="collapse1">
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
</div>
<a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse2" title="Description">Description</a>
<div class="collapse" id="collapse2">
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
</div>
</div>
</div>
Обратите внимание, что если вы открыли все свернутые меню одновременно, иногда выпадающее меню само по себе выпрыгивает изпозиция, вызванная автоматическим размещением popper.js.Если вы хотите это исправить, просто добавьте атрибут data-display="static" к первой ссылке, которая имеет data-toggle="dropdown", как в вашем случае:
<a class="btn btn-secondary dropdown-toggle" data-display="static" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true">Dropdown link</a>