响应网页手风琴在移动
Responsive webpage accordion in mobile
我几乎完成了网页,我知道如何折叠内容,但我仍然不知道如何直接显示内容,而是在移动设备中以手风琴风格显示,而不复制。
这是我的代码,我用Bootstrap制作手风琴。
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default hidden-xs">
<div class="panel-heading">
<h4 class="panel-title ">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" >Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
如果您不能复制内容并使用引导程序隐藏的帮助程序类,那么您可以使用javascript来完成此操作。
首先,删除在所有屏幕大小上初始化手风琴的数据属性。
其次,根据屏幕大小初始化手风琴。
if ($(window).width() < 960) {
$('#accordion').find('.panel-collapse').addClass('collapse')
$('#accordion').find('.panel-title a').attr('data-toggle','collapse')
$('#accordion').collapse()
}
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 响应网页手风琴在移动
- 如何获得动态 JQuery 移动手风琴.
- JQuery 手风琴在单击时不断移动到页面顶部
- 移动菜单手风琴逻辑
- 将引导选项卡栏转换为移动大小的手风琴菜单
- 如何制作一个在移动设备上运行良好的动画手风琴?纯JS或WebKit transform3d
- 在移动浏览器中使用jQuery手风琴是不是太慢了
- wordpress基础手风琴移动子菜单
- 如何将浏览器窗口移动到灵活的手风琴选项卡的顶部
- jQuery手风琴-移动选定的一个
- 动态Jquery移动手风琴
- Javascript手风琴菜单如何移动加上符号从右边到左边
- 将jquery手风琴元素从一个手风琴移动到另一个手风琴
- 手风琴菜单上的移动视窗
- 为移动网站 jquery 和 CSS 创建一个手风琴菜单
- 手风琴可以在移动设备上关闭所有部分,但在平板电脑和台式机上总是打开一个手风琴部分