jQuery垂直手风琴列表展示代码.zip资源-CSDN文库

共15个文件

eot：2个

css：2个

woff：2个

版权申诉

javascript

jQuery

htm5

71 浏览量 2022-11-20 22:07:38 上传评论收藏 512KB ZIP 举报

在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个“jQuery垂直手风琴列表展示代码”中，我们将探讨如何利用jQuery来实现一种常见的用户界面元素——垂直手风琴列表。这种列表在网页中广泛用于节省空间，尤其是在展示大量分类信息时，如导航菜单、产品目录或文章列表。手风琴效果是指一组可折叠的面板，每次只能展开一个，当一个面板展开时，其他面板会自动关闭。在垂直方向上，这种效果使用户能够逐个查看内容，保持页面整洁。我们需要在HTML中创建基本的结构，这通常是一系列带有标题和内容的容器。例如： ```html <div id="accordion"> <h3>标题1</h3> <div class="content"> 内容1 </div> <h3>标题2</h3> <div class="content"> 内容2 </div>  </div> ``` 接下来，我们需要引入jQuery库和自定义的CSS样式。CSS将用于定义手风琴的基本外观，如字体、颜色、边距等，以及展开/折叠状态的转换效果： ```css #accordion { width: 100%; } #accordion h3 { cursor: pointer; } .content { display: none; /* 默认隐藏内容 */ } .active { display: block; /* 展开状态下的内容 */ } ``` 然后，我们可以编写jQuery脚本来实现手风琴功能。以下是一个基本示例，它监听点击事件，根据当前选中的标题来显示或隐藏对应的content区域： ```javascript $(document).ready(function() { $('#accordion h3').click(function() { var $this = $(this); var $content = $this.next('.content'); // 移除所有其他内容的活动状态 $('#accordion .content').not($content).slideUp(); $('#accordion h3').removeClass('active'); // 如果当前内容已展开，则关闭 if ($content.is(':visible')) { $content.slideUp(); $this.removeClass('active'); } else { // 否则展开 $content.slideDown(); $this.addClass('active'); } }); }); ``` 以上代码中，`$(document).ready()`函数确保在DOM加载完成后执行。`click`事件监听器被绑定到所有`<h3>`元素上，当用户点击时，我们找到与其相邻的`.content`元素，并通过`slideUp()`和`slideDown()`方法控制其可见性。同时，我们使用`addClass`和`removeClass`来添加或移除`active`类，以实现视觉反馈。这个例子中的手风琴效果是单选的，即一次只能打开一个面板。如果你想实现多选手风琴（允许同时打开多个面板），只需稍微调整代码，去除关闭其他内容的部分即可。此外，HTML5的`<details>`和`<summary>`标签可以用来构建原生的手风琴效果，但可能没有jQuery实现的那样灵活和可定制。使用jQuery，你可以轻松地添加过渡动画、自定义事件处理或与其他库（如Bootstrap的Accordion组件）集成。 “jQuery垂直手风琴列表展示代码”提供了一个实用的示例，展示了如何借助jQuery和CSS实现交互式的垂直手风琴效果。通过这个例子，开发者可以学习到DOM操作、事件处理和CSS动画等前端开发中的关键技能。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery垂直手风琴列表展示代码.zip （15个子文件）

jQuery垂直手风琴列表展示代码

jiaoben4807

css

bootstrap.min.css 111KB

font-awesome.min.css 21KB

fonts

fontawesome-webfont.eot 55KB

glyphicons-halflings-regular.woff 23KB

fontawesome-webfont.woff 64KB

FontAwesome.otf 84KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 61KB

fontawesome-webfont.svg 280KB

fontawesome-webfont.ttf 110KB

index.html 5KB

bootstrap.min.js 36KB

jquery-1.11.0.min.js 94KB

jQuery垂直手风琴列表展示代码.jpg 36KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery垂直手风琴列表展示代码 - 网页模板</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> a:hover,a:focus{ text-decoration: none; outline: none; } #accordion{ padding-right: 24px; padding-left: 24px; z-index: 1; } #accordion .panel{ border: none; box-shadow: none; } #accordion .panel-heading{ padding: 0; border-radius: 0; border: none; } #accordion .panel-title{ padding: 0; } #accordion .panel-title a{ display: block; font-size: 16px; font-weight: bold; background: #e16b47; color: #f7c59f; padding: 15px 25px; position: relative; margin-left: -24px; transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed{ background: #f7c59f; color: #e16b47; margin-left: 0; transition: all 0.3s ease 0s; } #accordion .panel-title a:before{ content: ""; border-left: 24px solid #e16b47; border-top: 24px solid transparent; border-bottom: 24px solid transparent; position: absolute; top: 0; right: -24px; transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed:before{ border-left-color: #f7c59f; } #accordion .panel-title a:after{ content: "\f106"; font-family: 'FontAwesome'; position: absolute; top: 30%; right: 15px; font-size: 18px; color: #f7c59f; } #accordion .panel-title a.collapsed:after{ content: "\f107"; color: #e16b47; } #accordion .panel-collapse{ position: relative; } #accordion .panel-collapse.in:before{ content: ""; border-right: 24px solid #f7c59f; border-bottom: 18px solid transparent; position: absolute; top: 0; left: -24px; } #accordion .panel-body{ font-size: 14px; color: #333; background: #e4e4e4; border-top: none; z-index: 1; } </style> </head> <body> <div class="demo" style="padding: 1em 0;"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Section 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Section 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Section 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p> </div> </div> </div> </div> </div> </div> </div> </div> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js"></script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉