问题描述
我有一个以 Bootstrap 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>
我测试了这段 JS 代码,但它不起作用:
$('#modal_aside_first').on('.collapse',function () {
$(this).find("#collapseMenuManage .collapse").collapse("toggle");
});
解决方法
我不知道我是否理解正确,但在引导程序 4 中,您可以使用 body {
padding: 0;
}
.main {
border: 1px solid black;
width: 100vw;
height: 100vh;
}
.block {
position: absolute;
left: 50px;
padding: 30px;
background-color: aqua;
}
.moving-element {
width: 60px;
height: 60px;
border: 1px solid white;
background-color: purple;
font-size: 10px;
color: white;
}
自动显示内容。
示例:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="main">
<div class="block">
<button type="button" class="moving-element">Catch me</button>
</div>
</div>
您可以在 bootstrap 4 文档中查看更多详细信息 Collapse
,jQuery on
函数用于处理事件,.collapse
是 CSS 选择器,而不是事件。正确的事件是 show.bs.modal
作为 explained here。其次,正确的 CSS 选择器是 "#collapseMenuManage"
...
$('#modal_aside_first').on('show.bs.modal',function () {
$(this).find("#collapseMenuManage").collapse("toggle");
})