html 手风琴折叠,html – Bootstrap手风琴:当折叠或展开元素时如何避免页面滚动...

尝试折叠或展开手风琴的元素时,我有意外的页面滚动。也许我只是在bootstrap网格系统中做错了?以下是页面示例:

Long long long long long long header header header header header header lng lasd lewq j

data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"

aria-expanded="true" aria-controls="collapseOne">First list

class="panel-collapse collapse in">

  • Item1
  • Item2
  • Item3

data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"

aria-expanded="true" aria-controls="collapseTwo">Another list

class="panel-collapse collapse in">

  • Item1
  • Item2
  • Item3
Div with fixed height here

my footer here

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 5的手风琴(Accordion)组件中,新增的样式名包括: - `.accordion-button`:作为手风琴的按钮,用于展开/收起内容。 - `.accordion-header`:手风琴的标题部分,包括按钮和标题文字。 - `.accordion-collapse`:手风琴的内容部分,包括被折叠展开的内容。 与折叠插件结合使用,可以为`.accordion-button`添加`data-bs-toggle="collapse"`和`data-bs-target`属性,使其与`.accordion-collapse`关联。当点击`.accordion-button`,`.accordion-collapse`的展开状态会发生改变,从而实现手风琴的效果。以下是使用Bootstrap 5手风琴组件和折叠插件的示例代码: ```html <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices eros euismod, tincidunt ipsum id, molestie nunc. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> Sed vel risus at sapien scelerisque pretium at vel ipsum. Fusce eu nulla ligula. Aenean pulvinar, nisl nec vestibulum bibendum, dolor ligula blandit velit, at efficitur augue nisl sed ex. </div> </div> </div> </div> ``` 需要注意的是,手风琴组件和折叠插件的使用需要同引入`bootstrap.js`文件,以便使用其中的JavaScript代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值