首页 文章

修改Twitter Bootstrap折叠插件以保持手风琴打开

提问于
浏览 次
60

我正在尝试修改Bootstrap折叠插件，以允许我指定单击手风琴（打开）是否应该自动关闭手风琴中的其他项目（因此手风琴中的多个项目一次可以打开）

我想在手风琴上创建一个新的数据属性，比如 data-collapse-type="auto|manual"

引导jQuery插件对我的技能水平来说有点先进 . 我需要弄乱的最相关的部分似乎是在第52行， actives.collapse('hide') . 我没有设置't want that to happen if ' data-collapse-type = "manual"'（省略属性或设置 auto 应保持默认行为） .

我创建了一个jsfiddle where I've been experiementing .

任何人都可以帮助我走上正轨吗？

javascript jquery oop twitter-bootstrap

4 回答

  • 5

    我已经分叉并更新了你的小提琴 .

    只是去.show函数，我也写了评论 .

    http://jsfiddle.net/2Rnpz/

    回复于
  • -3

    实际上， you don't need to modify any code . 请仔细阅读twitterbootstrap网站上的以下声明

    只需将data-toggle =“collapse”和数据目标添加到元素即可自动分配对可折叠元素的控制 . data-target属性接受css选择器以应用折叠 . 请务必将类折叠添加到可折叠元素 . 如果您希望它默认打开，请添加其他类 .

    因此，不要使用 data-parent='#idofAccordion' ，而是使用 data-target='#idofCollapseItem' .

    它应该完美 .

    这是demo on plunker

    回复于
  • 2

    因为问题没有't refer to a specific version of Bootstrap, here'是一个bootstrap 4解决方案：使用 data-toggle="collapse" 属性从标签中删除 data-parent="#accordion" . 这是从Collapse文档中取出的示例，其中取出了 data-parent=#accordion" 位 .

    bootply：https://www.bootply.com/3wV4WbzBtT#

    回复于
  • 210

    只有一个手风琴一次打开的技术（即其余的折叠），放置data-parent =“＃accordion”data-target =“＃collapseOne”，所以它看起来像这样

    <a class="accordion-toggle" data-toggle="collapse" href="#"
    data-parent="#accordion" data-target="#collapseOne">
  Item #1
</a>

    你可以在plunker中查看它：http://plnkr.co/edit/56iXtA?p=preview

    回复于

相关问题