如何解决如何自动打开“折叠”菜单?
我有一个以 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");
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。