js jquery 图文并茂讲解手风琴,

原创 2012年03月28日 19:54:37

鼠标移到third上显示


鼠标移到second上显示



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language="javascript" src="../jquery插件/jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script language="javascript" src="../jquery插件/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery插件/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script language="javascript">
 $(function (){
//运用jquery生成手风琴
$("#accordion").accordion({ 
header: "h3",
disabled:false,
active:2,
animated:'bounceslide',
event:'mouseover',
navigation:true,
});
})
</script>
<body>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>


</div>


<div>


<h3><a href="#">Second</a></h3>


<div>Phasellus mattis tincidunt nibh.</div>


</div>


<div>


<h3><a href="#">Third</a></h3>


<div>Nam dui erat, auctor a, dignissim quis.</div>


</div>


</div>


</body>
</html>

jquery实现手风琴效果

简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢)         Title             *{m...
  • sunflower_li
  • sunflower_li
  • 2017年03月16日 15:10
  • 784

jQuery自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101...
  • alokka
  • alokka
  • 2017年06月15日 22:52
  • 780

jQuery和CSS3动感手风琴多级列表树菜单

mtree.js是一款效果非常炫酷的jQuery和CSS3动感手风琴多级列表树菜单插件。该手风琴多级列表树菜单基于velocity.js和CSS3 transitions来制作。它提供了5种主题样式的...
  • sunny_girls
  • sunny_girls
  • 2015年05月26日 12:59
  • 2899

原生JS手风琴下拉(修改)

上一篇写的原生JS手风琴。有朋友说在同一页面上不能同时new两个方法。不然就会被覆盖。确实是这样。因为写法的问题所以怎么new都是引用的是一个对象;其他的会被覆盖掉.所以针对这事件,做了修改 java...
  • hao452378531
  • hao452378531
  • 2016年08月03日 12:12
  • 758

【JQuery】jQuery自制简易手风琴效果(附实现原理)

简易手风琴效果,附实现原理
  • LZGS_4
  • LZGS_4
  • 2015年08月30日 09:48
  • 7805

分享Jquery实现网格手风琴特效

摘要: 此Jquery实现了网格手风琴特效,结合网格手风琴缩略图和手风琴面板的功能,是你展示你的图片网站一个非常有趣的方法。你可以选择使用XML或HTML。功能强大的API将允许进一步提高这个Jque...
  • zzzkk2009
  • zzzkk2009
  • 2013年05月31日 09:14
  • 531

jquery简单手风琴效果

html: css: .sfqdiv{ width:1280px; height:300px; background-color: #...
  • encircles
  • encircles
  • 2016年08月10日 09:47
  • 288

jquery accordion 手风琴的使用

首先,accordion 的意思是手风琴,发音是 饿考滴儿 ,嘿嘿,我觉得大家在使用的时候应该使用它的正确发音,我想是因为效果像是手风琴吧,所以叫做accordion吧,我开始没有仔细看,还以为是ac...
  • haitaoDoit
  • haitaoDoit
  • 2012年03月28日 22:02
  • 5424

jQuery手风琴效果

原地址:http://www.jq22.com/jquery-info9370
  • cometwo
  • cometwo
  • 2016年09月12日 09:34
  • 1037

垂直手风琴5级菜单!用js+jquery动态加载菜单,附上源码hezhu和注释

1.需要一个左侧菜单,延伸到5级,并且有tab页,折叠收缩菜单。 2.附上jsp代码 ...
  • dmlcq
  • dmlcq
  • 2016年12月15日 16:14
  • 1778
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js jquery 图文并茂讲解手风琴,
举报原因:
原因补充:

(最多只允许输入30个字)