jQuery实现手风琴效果

<div class="panel">
<div class="panel-header">
jQuery的核心特性
</div>
<div class="panel-body">
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
</div>
<div class="panel-header">jQuery团队</div>
<div class="panel-body">
2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。
</div>
<div class="panel-header">jQuery 1.4.2版发布</div>
<div class="panel-body">
2010年2月,jQuery 1.4.2版发布,它新增了有关事件委托的两个方法:delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便,而且也可以达到动态添加事件的作用。
</div>
</div>

<style>

.panel-body {
border:1px solid #ddd;
border-radius:3px;
background:#33ff33;
width:400px;
}
.panel-body:not(:nth-child(2)) {
display:none;
}

</style>

<script>

$(".panel").on("click", ".panel-header", function() {
var next = $(this).next();
next.slideToggle("slow");
$(".panel-body").not(next).slideUp();
})

</script>

link:http://www.jq22.com/webqd1853

原文地址:https://www.cnblogs.com/weibo806/p/9927244.html

时间: 2024-10-20 16:06:48

jQuery实现手风琴效果的相关文章

用jquery实现手风琴效果

<style type="text/css"> ul li{ list-style: none; width:200px; height:30px; text-align: center; line-height:30px; background-color:deepskyblue; } ul{ display:none; margin:0; padding:0; } h3{ width:200px; height:30px; margin:0; padding:0; te

jquery横向手风琴效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery横向手风琴效果</title> <style> .solution-item{ position: relative; width:1000px; height:420px; margin:50px auto; overflow: h

基于jquery横向手风琴效果

基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash"> <div class="con"> <ul> <li class="current ti1"> <h3>关于我们</h3> <div class="show"> &

jquery之手风琴效果

jquery各版本下载地址 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta

jQuery实现手机竖直手风琴效果

效果:http://hovertree.com/texiao/jquery/65/ 效果图: 代码: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

jQuery插件实例四:手风琴效果[无动画版]

手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的. 在这个插件中,CSS和JS的配置非常重要,需要特别注意.另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果? 效果图预览 插件JS accordionB.js 1 ; 2 (function ($,

jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: html: <ul class="wrap"> <li class="checked"> <span>选项1</span> <div>1</div> </li> <li> <

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

基于 jQuery 实现垂直滑动的手风琴效果

今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底部滑动. 效果演示     插件下载 HTML 示例代码: <div id="va-accordion" class="va-container"> <div class="va-nav"> <span class=&q