jquery手风琴动画效果代码（jquery手风琴折叠菜单）

今天给各位分享jquery手风琴动画效果代码的知识，其中也会对jquery手风琴折叠菜单进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、jquery 代码求解
• 2、JQ手风琴效果，请大神帮我修改下bug
• 3、如何用JQuery实现后台管理系统left中的手风琴效果。。
• 4、jquery的手风琴特效
• 5、我网页现在有一排手风琴效果的图片，现在要求鼠标光标滑到任意一个图，下方显示相应图，用jQuery
• 6、高分求jquery 手风琴效果实现代码

jquery 代码求解

$("#accordion .trigger").css("background",'url("images/muma1.jpg")')

你一刷新页面就都是用的muma1.jpg；

加上$("#accordion .trigger:first").css("background",'url("images/muma2.jpg")');

这样才会和下面的背景图不一样

JQ手风琴效果，请大神帮我修改下bug

div{

margin: 100px auto;

width: 1190px;

height: 340px;

display:flex; /*加上这个*/

}

如何用JQuery实现后台管理系统left中的手风琴效果。。

很简单，我大概写个思路吧。

用div举例比较容易：如

css

.a div{height:30px}

.a .zk{height:100px}

---------------------------

html

div class='a'

div class="zk"1/div

div2/div

div3/div

/div

----------------------------

js

$(".a div").each(function(){

$(this).click(function(){

$(".a div").animate({height:30px},1000);

$(this).animate({height:"100px"},1000);

});

});

以上是大概思路，详细的控制你可以自己酌情添加。

jquery的手风琴特效

$(function(){

  $(".theatre-item").mouseover(function(){

    $(this).addClass('aa');

    $(this).siblings().addClass('aa');  //this的兄弟节点添加类aa

    $(this).next().removeClass('aa')    //this的下一个节点去除类aa

  });

  $(".theatre-item").mouseout(function(){

    $(this).removeClass('aa');

  });

});

我网页现在有一排手风琴效果的图片，现在要求鼠标光标滑到任意一个图，下方显示相应图，用jQuery

鼠标滑动事件

script type="text/javascript"

$(function(){

$("#nav-mark-btn").hover(function(){

$("#mark-info").show();

},function(){

$("#mark-info").hide();

})

})

/script

高分求jquery 手风琴效果实现代码

style

*,body,ul,li,a,h2{ margin:0; padding:0; list-style:none;}

body{font:12px "宋体"; padding-top:20px;}

#menu { width:211px; height:100%; float:left; margin-left:22px; margin-left:11px; margin-top:10px; margin-bottom:10px; _padding-bottom:10px; overflow:hidden;}

#menu a { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/itemBg.jpg) no-repeat left top; color: #000000; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu a:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu h2 { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/type_sec.jpg) no-repeat left top; color: #db5901; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu h2:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; color: #333333; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu a.navhov { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

.no { display:none;}

.type_prod_title{width:234px; height:26px; background-color:#4c4c4c; text-align:center; font-size:12px; color:White; line-height:26px; font-weight:normal; float:left; overflow:hidden;}

/style

div class="type_prod_con"

div class="type_prod_title"

产品专区/div

div id="menu"

a onclick="javascript:ShowMenu(this,'NO0')"实木地板系列/a

span id="NO0" class="no"

h2 onclick="javascript:ShowMenu(this,'NO00')"

实木地板名称/h2

h2 onclick="javascript:ShowMenu(this,'NO01')"

实木地板名称/h2

h2 onclick="javascript:ShowMenu(this,'NO02')"

实木地板名称/h2

h2 onclick="javascript:ShowMenu(this,'NO03')"

实木地板名称/h2

/span

a onclick="javascript:ShowMenu(this,'NO1')"实木门系列/a span id="NO1" class="no"

h2 onclick="javascript:ShowMenu(this,'NO10')"

实木门名称/h2

h2 onclick="javascript:ShowMenu(this,'NO11')"

实木门名称/h2

/spana onclick="javascript:ShowMenu(this,'NO2')"板式家具系列/a span id="NO2" class="no"

h2 onclick="javascript:ShowMenu(this,'NO20')"

三级菜单C_1/h2

h2 onclick="javascript:ShowMenu(this,'NO21')"

三级菜单C_2/h2

/spana onclick="javascript:ShowMenu(this,'NO3')"软床系列/a span id="NO3" class="no"

h2 onclick="javascript:ShowMenu(this,'NO30')"

四级菜单D_1/h2

h2 onclick="javascript:ShowMenu(this,'NO31')"

四级菜单D_2/h2

/spana onclick="javascript:ShowMenu(this,'NO4')"沙发系列/a span id="Span1" class="no"

h2 onclick="javascript:ShowMenu(this,'NO40')"

四级菜单D_1/h2

h2 onclick="javascript:ShowMenu(this,'NO41')"

四级菜单D_2/h2

/spana onclick="javascript:ShowMenu(this,'NO5')"饰品系列/a span id="Span2" class="no"

h2 onclick="javascript:ShowMenu(this,'NO50')"

四级菜单D_1/h2

h2 onclick="javascript:ShowMenu(this,'NO351')"

四级菜单D_2/h2

/span

/div

/div

script language="JavaScript"

!--//

function ShowMenu(obj,noid){

var block = document.getElementById(noid);

var n = noid.substr(noid.length-1);

if(noid.length==4){

var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");

var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");

for(var i=0; ih2.length;i++){

//h2[i].innerHTML = h2[i].innerHTML.replace("+","-");

h2[i].style.color = "";

}

obj.style.color = "#db5901";

for(var i=0; iul.length; i++){if(i!=n){ul[i].className = "no";}}

}else{

var span = document.getElementById("menu").getElementsByTagName("span");

var h1 = document.getElementById("menu").getElementsByTagName("h1");

for(var i=0; ih1.length;i++){

h2[i].innerHTML = h1[i].innerHTML.replace("+","-");

h2[i].style.color = "";

}

obj.style.color = "#ffffff";

for(var i=0; ispan.length; i++){if(i!=n){span[i].className = "no";}}

}

if(block.className == "no"){

block.className = "";

obj.innerHTML = obj.innerHTML.replace("-","+");

}else{

block.className = "no";

obj.style.color = "";

}

}

//--

/script

关于jquery手风琴动画效果代码和jquery手风琴折叠菜单的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。