PROSAGA码农传奇-html/HTML5-如何在下拉菜单中添加折叠子菜单？

<div class =“post-text”itemprop =“text”>
  <P>
    您将需要一些jquery来实现：
  </p>
  <P>
    的<strong>
      更新：
    </强>
     切换
     <code>
      aria-expanded
    </code>
     属性
  </p>
   <pre class="lang-js prettyprint-override">
    <code>
      $( 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();

</code>
  </pre>
  <P>
    的<strong>
      例：
    </强>
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          $(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');
  });
});
        </code>
      </pre>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <HR />
  <P>
    请注意，如果您同时打开所有折叠的菜单，有时它自己的下拉菜单会跳出其位置而导致的
     <code>
      popper.js
    </code>
     自动放置。如果你想修复它，只需添加
     <code>
      data-display="static"
    </code>
     属性到第一个链接
     <code>
      data-toggle="dropdown"
    </code>
     在你的情况下：
  </p>
   <pre class="lang-html prettyprint-override">
    <code>
      <a class="btn btn-secondary dropdown-toggle" data-display="static" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true">Dropdown link</a>

</code>
  </pre>
</DIV>