Javascript 如何打开一个"；“崩溃”；自动菜单？

我有一个引导4主题的网站。我希望

collapseMenuManage

菜单在显示时自动打开。以下是我的页面的HTML代码：

<div id="modal_aside_first" class="modal fixed-right pl-0 fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-aside" role="document">
    <div class="modal-content">
      <div class="modal-body d-flex flex-column">

        <div class="accordion list-group mb-0" id="accordionMenu">

          <div id="headingMenuMain">
            <a class="list-group-item list-group-item-action border-0 pl-2" data-toggle="collapse" href="#collapseMenuMain" aria-expanded="true" aria-controls="collapseMenuMain">
              <i class="bi bi-plus-circle bi-lg"></i> Menu principal
            </a>
          </div>
          <div id="collapseMenuMain" class="collapse show" aria-labelledby="headingMenuMain" data-parent="#accordionMenu">
            ...
          </div>

          <div id="headingMenuManage">
            <a class="list-group-item list-group-item-action border-0 pl-2" data-toggle="collapse" href="#collapseMenuManage" aria-expanded="false" aria-controls="collapseMenuManage">
              <i class="bi bi-plus-circle bi-lg"></i> Gérer votre compte
            </a>
          </div>
          <div id="collapseMenuManage" class="collapse" aria-labelledby="headingMenuManage" data-parent="#accordionMenu">
            ...
          </div>

        </div>

      </div>
    </div>
  </div>
</div>

---

我不知道我是否理解正确，但在bootstrap 4中，您可以使用

class=“collapse show”

自动显示内容

例如：

  <div class="card">
<div class="card-header" id="headingOne">
  <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </button>
  </h5>
</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  </div>
</div>

可折叠组项目#1
动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。

---

您可以在bootstrap 4文档中看到更多详细信息，我不知道是否正确理解您的意思，但在bootstrap 4中，您可以使用

class=“collapse show”

自动显示内容

例如：

  <div class="card">
<div class="card-header" id="headingOne">
  <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </button>
  </h5>
</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  </div>
</div>

可折叠组项目#1
动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。

---

您可以在bootstrap 4文档中看到更多详细信息

上的jQuery

函数用于处理事件和
。collapse
是CSS选择器，而不是and事件。正确的事件是
show.bs.modal
as。其次，正确的CSS选择器是
“#collapseMenuManage”

$('#modal_aside_first').on('show.bs.modal', function () { 
  $(this).find("#collapseMenuManage").collapse("toggle");
})

on

函数上的jQuery

用于处理事件，而
。collapse
是CSS选择器，而不是and事件。正确的事件是
show.bs.modal
as。其次，正确的CSS选择器是
“#collapseMenuManage”

$('#modal_aside_first').on('show.bs.modal', function () { 
  $(this).find("#collapseMenuManage").collapse("toggle");
})

为什么会这样呢？
。折叠
不是一个好方法event@GetSet我应该在我的JS文件中放什么才能让它工作呢？也许可以添加类。我真的不知道。我会投票给你，所以这会引起注意。你有两个div，Id
headingMenuManage
。您想打开哪一个？为什么这样做？
。折叠
不是一个选项event@GetSet我应该在我的JS文件中放什么才能让它工作呢？也许可以添加类。我真的不知道。我会投票给你，所以这会引起注意。你有两个div，Id
headingMenuManage
。您想打开哪一个？谢谢您的回复，但我确实需要用JS来打开。@mlllmmlml ahhh好的，对不起！我误解了你……：）谢谢你的回复，但是我需要做的是想用JS来做这个。@mlllmmlml ahhh好的，对不起！我误解了你……：）非常好，谢谢。我有个小问题。我在同一个
headingMenuMain
和
headingMenuManage
arcordion中有两个菜单。默认情况下，
headingMenuMain
菜单处于打开状态，我想在出现
headingMenuManage
时将其关闭。目前，两个菜单都处于打开状态。通常在我的手风琴中一次只能打开一个菜单。非常好，谢谢。我有个小问题。我在同一个
headingMenuMain
和
headingMenuManage
arcordion中有两个菜单。默认情况下，
headingMenuMain
菜单处于打开状态，我想在出现
headingMenuManage
时将其关闭。目前，两个菜单都处于打开状态。通常我的手风琴一次只能打开一个菜单。