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>

如何在下拉菜单中添加折叠子菜单？

1 个答案: