JQuery 创建可折叠效果的菜单

最新推荐文章于 2021-10-13 16:41:06 发布

网络全息测量

最新推荐文章于 2021-10-13 16:41:06 发布

阅读量2.2k

点赞数

分类专栏： JQuery Mobile

JQuery Mobile 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用JQuery Mobile创建可折叠的内容区块，包括基本用法、样式定制及高级特性，例如设置初始状态、图标位置和嵌套折叠区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要创建内容折叠块。首先，创建一个容器，并添加 data-role="collapsible" 属性。并且给此容器使用 data-content-theme 属性，为可折叠的内容块，进行主题样式设计。

其次，在容器中，添加任何头部区域的标题（h1-h6）或图例元素(egend element)。JQuery Mobile框架将样式化头部，使其看起来像一个可点击的按钮，并添加一个“+”图标左边表示它的膨胀。

最后，在头部区域后，添加任何HTML标记作为被折叠的内容区域。JQuery Mobile框架将把这个标记为包裹起来。当点击头部标题的时候，内容将被折叠隐藏或者显示出来。

默认情况下，内容是被折叠起来的。

<div data-role="collapsible">
  <h3>I'm a header</h3>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

折叠起来的样式

点击被打开样式

展开折叠 data-collapsed="false"

默认情况下，可折叠容器是收缩的，可以通过通过点击头部展开。给容器添加 data-collapsed="false" 属性，可实现当加载页面的时候，折叠内容区域为展开样式。

<div data-role="collapsible" data-collapsed="false" >

取消圆角 data-inset="false"

默认情况下折叠区域有插图的外观（两头有圆角等）。若要让他们全屏宽度无角造型，给容器添加 data-inset="false" 属性。

<div data-role="collapsible" data-inset="false" >

迷你型 data-mini="true"

一个更紧凑的版本，在工具栏和紧空间是有用的，添加 data-mini="true" 属性即可

<div data-role="collapsible" data-mini="true" >

自定义图标 data-collapsed-icon

可折叠的标题的默认图标可以通过使用data-collapsed-icon和data-expanded-icon属性数据扩展。

在以下情况下，data-collapsed-icon="arrow-r"和data-expanded-icon="arrow-d"。

<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
	<h3>I have custom icons</h3>
	<p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
</div>

展开前的效果

展开后的效果

图标定位 data-iconpos

默认情况下，图标位于左侧。但可是使用 data-iconpos 属性来自定义。下例子中，使用了data-iconpos="right"来自定义：

<div data-role="collapsible" data-iconpos="right">
	<h3>I'm a header</h3>
	<p><code>data-iconpos="right"</code></p>
</div>

折叠内容区的主题样式 data-content-theme

在可折叠的标题和内容之间，提供一个强大的视觉美化效果，给容器添加 data-content-theme 属性的和指定的主题样本的字母（如，a、b、c、d、e）。使内容块有：边界线和平坦的背景颜色（非渐变色）和底部圆角。使他们看起来像是一组。

<div data-role="collapsible" data-content-theme="c">
  <h3>Header</h3>
  <p>I'm the collapsible content with a themed content block set to "c".</p>
</div>

展开前的效果

展开后的效果

折叠标题区的主题样式 data-theme

设置在一个可折叠的主题标题按钮，添加 data-theme 属性的包装和指定一个样本的字母（如，a、b、c、d、e）。请注意，你可以分别设置标题和内容的这些主题匹配属性。

<div data-role="collapsible" data-theme="a" data-content-theme="a">
  <h3>Header swatch A</h3>
  <p>I'm the collapsible content with a themed content block set to "a".</p>
</div>

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h3>Header swatch B</h3>
  <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>

展开前的效果

展开后的效果

嵌套折叠区

根据需要折叠区可以彼此嵌套。在下面例子中，我们设置的内容主题提供清晰的视觉效果。

		<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
			<h3>I'm a header</h3>
			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			
			<div data-role="collapsible" data-theme="c" data-content-theme="c">
				<h3>I'm a nested collapsible with a child collapsible</h3>
				<p>I'm a child collapsible.</p>
					<div data-role="collapsible" data-theme="d" data-content-theme="d">
						<h3>Nested inside again.</h3>
						<p>Three levels deep now.</p>
					</div><!-- /section 1A -->
			</div><!-- /section 1 -->
			
			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 3: Form elements</h3>
				<form action="#" method="get">
					<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
					</div>
					<div data-role="fieldcontain">
						<label for="slider">Input slider:</label>
					 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
					</div>
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
				    </fieldset>
				</form>
			</div><!-- /section 2 -->
			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 4: Collapsed list</h3>
				<p>Here is an inset list:</p>
				<ul data-role="listview" data-inset="true" data-theme="d">
					<li><a href="index.html">Acura</a></li>
					<li><a href="index.html">Audi</a></li>
					<li><a href="index.html">BMW</a></li>
					<li><a href="index.html">Cadillac</a></li>
					<li><a href="index.html">Chrysler</a></li>
					<li><a href="index.html">Dodge</a></li>
					<li><a href="index.html">Ferrari</a></li>
					<li><a href="index.html">Ford</a></li>
				</ul>
			</div><!-- /section 3 -->
		</div>

展开前的效果

展开后的效果