如何在下拉菜單中添加折疊子菜單？

Question

如何在下拉菜單中添加折疊菜單？ 當您單擊折疊菜單項時，下拉菜單關閉。 當您重新打開下拉菜單時，折疊將起作用。

 <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" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <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" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> 

Answer 1

您將需要一些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>