MUI-折叠面板效果accordion

小咪咪 2022-08-02 09:58 525阅读 0赞

在做开发的过程中我们经常用到折叠面板。那我们来看下折叠面板究竟是怎么使用。

废话不多说。

代码粘下来：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title>折叠效果</title>
    		<script src="js/mui.min.js"></script>
    		<link href="css/mui.min.css" rel="stylesheet" />
    		<script type="text/javascript" charset="utf-8">
    			mui.init();
    		</script>
    	</head>
    	<body>
    		<header class="mui-bar mui-bar-nav">
    			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    			<h1 class="mui-title">折叠面板</h1>
    		</header>
    		<div class="mui-content">
    			<div class="mui-card">
    				<ul class="mui-table-view">
    					<li class="mui-table-view-cell mui-collapse">
    						<a class="mui-navigate-right">折叠标题</a>
    						<div class="mui-collapse-content">
    							<p>我是内容1</p>
    							<p>我是内容2</p>
    							<p>我是内容3</p>
    							<p>我是内容4</p>
    						</div>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</body>
    </html>

运行结果如下所示：

![Image 1][]   ![Center][]                                    ![Image 1][]![Center 1][]

![Image 1][]                           ![Image 1][]

[Image 1]: 
[Center]: https://img-blog.csdn.net/20150716220539305?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220731/fcb68e1405a24aa4ac4932c26fecbecd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，525人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 折叠面板（Accordion）

在一个有限的空间内显示用于呈现信息的可折叠的内容面板。如需了解更多有关 accordion 部件的细节，请查看 API 文档 [折叠面板部件（Accordion Widge

﹏ヽ暗。殇╰゛Y/ 2024年03月24日 16:32/ 0 赞/ 81 阅读

相关如何使用CSS实现一个带有动画效果的折叠面板（Accordion）？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 折叠面板（Accordion）带动画效果 ⭐ 写在最后 -------------------- ⭐

我不是女神ヾ/ 2023年10月15日 15:53/ 0 赞/ 59 阅读

相关 uniapp折叠面板

[uniaap折叠面板官网地址][uniaap]  <uni-collapse @change="change">

淡淡的烟草味﹌/ 2023年01月11日 13:06/ 0 赞/ 351 阅读

相关 Bootstrap教程(25)--折叠面板、折叠面板导航

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1.

谁借莪１个温暖的怀抱￠/ 2022年11月07日 11:42/ 0 赞/ 254 阅读

相关 html5 面板折叠,HTML5仿苹果手机的面板合拢折叠效果

passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket\{ width:300px; height:460px; padding: 10px;

妖狐艹你老母/ 2022年10月05日 15:54/ 0 赞/ 273 阅读

相关 MUI-折叠面板效果accordion

在做开发的过程中我们经常用到折叠面板。那我们来看下折叠面板究竟是怎么使用。废话不多说。代码粘下来： <!DOCTYPE html> <html>

小咪咪/ 2022年08月02日 09:58/ 0 赞/ 526 阅读

相关 extjs accordion 布局如何让items全部都折叠

加个隐藏的子面板 Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', width: 300, hei

川长思鸟来/ 2022年07月16日 09:07/ 0 赞/ 210 阅读

相关 jQuery 折叠面板

手风琴是非常常见而实用的效果，本篇文章示例一个简单的手风琴效果。上效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

傷城~/ 2022年05月14日 15:51/ 0 赞/ 372 阅读

相关轻松实现折叠面板组件

实现的效果类似element-ui的Collapse折叠面板组件，地址[链接][Link 1]。使用效果 <collapse> <collapse-i

末蓝、/ 2021年09月20日 00:22/ 0 赞/ 503 阅读

相关 vue 实现折叠面板

效果图 ![在这里插入图片描述][20200518095018220.gif_pic_center] 思路其实说是折叠效果，关键是数据的处理， 1：第一行开头

忘是亡心i/ 2021年08月30日 01:50/ 0 赞/ 772 阅读