需要帮助以使用jQuery mobile制作非可折叠部分 [英] Need help to make non-collapsible section using jQuery mobile
问题描述
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
<div> <!--I tried this but this only makes simple heading without any background style used for other collapsible section headings-->
<h3>Read only Section 3</h3>
</div>
</div>
使用上述模式，我想在 collabsile-set 中创建仅带有标题的div，并且由于某些要求，我希望使其不塌陷.如果有人对此有所了解，请告诉我
using the above pattern I want to make some divs within the collabsile-set with heading only and I want to make them non-collapsible because of some requirements. If anybody know anything regarding this, please let me know
推荐答案
内容的折叠/展开是在可折叠标题的 click 处理程序中进行的.因此，通过取消绑定 click事件，您可以使手风琴始终处于展开状态.
The collapse/expand of content is being handled in the click handler of the collapsible heading.So by unbinding the click event you can keep accordion always expanded.
$(".ui-collapsible-heading").unbind("click");
此处的演示- http://jsfiddle.net/8dLw4/
修改
经过编辑的提琴，用于始终保持某些处于展开状态- http://jsfiddle.net/8dLw4/2/
Edited fiddle for keeping some in expanded state always- http://jsfiddle.net/8dLw4/2/
添加了属性 data-allow-collapse .对于要允许折叠的部分，请将其设置为 true .对于其他部分， false .
An attribute data-allow-collapse is added.For sections you want to allow collapse,set it as true.For other sections false.
这是完整的源代码:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page").live('pageinit', function(event) {
$(".ui-collapsible[data-allow-collapse=false]").unbind("expand collapse");
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 1-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 2-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 3-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 4-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
这篇关于需要帮助以使用jQuery mobile制作非可折叠部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
