有没有办法只让 Bootstrap 手风琴在移动设备上工作？答案

【问题标题】：Is there a way to only have Bootstrap accordion work in mobile?有没有办法只让 Bootstrap 手风琴在移动设备上工作？
【发布时间】：2015-09-25 23:39:05
【问题描述】：

有没有办法让 Bootstraps 手风琴功能只在移动设备中使用？在桌面版中，我希望面板中的内容在没有外部边框或手风琴功能的情况下显示。

【问题讨论】：

标签： twitter-bootstrap-3 accordion

【解决方案1】：

最简单的方法是同时包含这两个版本，但在桌面版本中添加一个响应式实用程序类以将其隐藏在移动设备上：

<div class="hidden-xs">
 // desktop version here
</div>

并将相应的类添加到移动版本以在移动端显示：

<div class="visible-xs-block">
 // mobile version here
</div>

这里是documentation for responsive helper classes。

【讨论】：

【解决方案2】：

很抱歉回答了这么老的问题，但在寻找快速解决方案时遇到了这个问题，所以我想分享一下我的想法。

//collapse BS accordions on page load in mobile view, and re-expands if screen size changes to tablet or desktop size $(window).on("load resize",function(){ var screenwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; if (screenwidth <= 767) { $('.panel-collapse').removeClass('in'); $('a[aria-expanded="true"]').addClass("collapsed"); $('a[aria-expanded="true"]').attr("aria-expanded", "false"); } if (screenwidth >= 768) { $('#accordion1 .panel-collapse').addClass('in'); $('#accordion1 a[data-toggle="collapse"]').removeClass('collapsed'); $('#accordion1 a[data-toggle="collapse"]').attr("aria-expanded", "true"); } });

【讨论】：