手风琴如何改成竖排的效果? 本帖最后由 yyixin 于 2009-08-24 20:06:05 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <script src="js/jquery-1.3.2.js"></script><script type=text/javascript> var cur;window.onload=function(){ $("#main>li").click(function(){ var obj = $(this).children("#sub")[0]; if(cur == obj) return false; if(cur!=null) cur.style.display = "none"; obj.style.display = "block"; cur = obj; }); }</script><style> li{cursor:pointer}ul{list-style:none;width:200px;}#main{background:green;color:#FFF;}#sub{background:#EEE;display:none;color:blue;margin-left:0;}</style> <ul id="main"> <li>menu1 <ul id="sub"> <li>sub11</li> <li>sub12</li> </ul> </li> <li>menu2 <ul id="sub"> <li>sub21</li> <li>sub22</li> </ul> </li> <li>menu3 <ul id="sub"> <li>sub31</li> <li>sub32</li> </ul> </li></ul> http://www.scriptlover.com/controls/AccControl/demo.html <!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><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type=text/javascript> $(document).ready(function(){ //点击事件: $("#click .list").each(function(){ var _this = $(this); var _menu = _this.find("#menu"); var _sub = _this.find("#sub"); _menu.click(function(){ _sub.slideToggle(); }); }); //鼠标经过 $("#mouseover .list").each(function(){ var _this = $(this); var _menu = _this.find("#menu"); var _sub = _this.find("#sub"); var _height = _sub.height(); _this.hover( function(){ _sub.stop().css("height",0+"px").show().animate({"height":_height+"px"},300); },function(){ _sub.stop().animate({"height":0},300); } ); });});</script><style> #click,#mouseover{ background:green; color:#FFF; width:200px;}.list #menu{ cursor:pointer;}.list #sub{ list-style:none; width:200px; height:40px; margin:0px; background:#EEE; display:none; color:blue; overflow:hidden;}</style> </head><body><!-- 点击的例子: --><div id="click"> <div class="list"> <div id="menu">menu1</div> <ul id="sub"> <li>sub11</li> <li>sub12</li> </ul> </div> <div class="list"> <div id="menu">menu2</div> <ul id="sub"> <li>sub21</li> <li>sub22</li> </ul> </div> <div class="list"> <div id="menu">menu3</div> <ul id="sub"> <li>sub31</li> <li>sub32</li> </ul> </div></div><br/><!-- 鼠标经过的例子: --><div id="mouseover"> <div class="list"> <div id="menu">menu1</div> <ul id="sub"> <li>sub11</li> <li>sub12</li> </ul> </div> <div class="list"> <div id="menu">menu2</div> <ul id="sub"> <li>sub21</li> <li>sub22</li> </ul> </div> <div class="list"> <div id="menu">menu3</div> <ul id="sub"> <li>sub31</li> <li>sub32</li> </ul> </div></div></body></html> AJAX 异步请求 等待异步请求执行结果 执行下一个函数 求新浪微薄JS解析 关于 js 传值 输出 HTML 类似JS四舍五入的问题.请大家看下 1.html 如何把 2.html全包进来 一个时间日期脚本 ff兼容问题 一个关于js控制tree展开关闭的问题 请问js如何屏蔽鼠标右键的刷新项啊(其它右键功能要保留) 如何用js取得form中某个同名checkbox 域一共有几个? DOM编程艺术综合示例-增强表单中的问题 子窗口刷新父窗口问题 请教一个JQUERY问题。。
<script src="js/jquery-1.3.2.js"></script>
<script type=text/javascript>
var cur;
window.onload=function(){
$("#main>li").click(function(){
var obj = $(this).children("#sub")[0];
if(cur == obj) return false;
if(cur!=null) cur.style.display = "none";
obj.style.display = "block";
cur = obj;
});
}
</script>
<style>
li{cursor:pointer}
ul{list-style:none;width:200px;}
#main{background:green;color:#FFF;}
#sub{background:#EEE;display:none;color:blue;margin-left:0;}
</style>
<ul id="main">
<li>menu1
<ul id="sub">
<li>sub11</li>
<li>sub12</li>
</ul>
</li>
<li>menu2
<ul id="sub">
<li>sub21</li>
<li>sub22</li>
</ul>
</li>
<li>menu3
<ul id="sub">
<li>sub31</li>
<li>sub32</li>
</ul>
</li>
</ul>
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type=text/javascript>
$(document).ready(function(){
//点击事件:
$("#click .list").each(function(){
var _this = $(this);
var _menu = _this.find("#menu");
var _sub = _this.find("#sub");
_menu.click(function(){
_sub.slideToggle();
});
});
//鼠标经过
$("#mouseover .list").each(function(){
var _this = $(this);
var _menu = _this.find("#menu");
var _sub = _this.find("#sub");
var _height = _sub.height();
_this.hover(
function(){
_sub.stop().css("height",0+"px").show().animate({"height":_height+"px"},300);
},function(){
_sub.stop().animate({"height":0},300);
}
);
});
});
</script>
<style>
#click,#mouseover{
background:green;
color:#FFF;
width:200px;
}
.list #menu{
cursor:pointer;
}
.list #sub{
list-style:none;
width:200px;
height:40px;
margin:0px;
background:#EEE;
display:none;
color:blue;
overflow:hidden;
}
</style>
</head><body>
<!-- 点击的例子: -->
<div id="click">
<div class="list">
<div id="menu">menu1</div>
<ul id="sub">
<li>sub11</li>
<li>sub12</li>
</ul>
</div>
<div class="list">
<div id="menu">menu2</div>
<ul id="sub">
<li>sub21</li>
<li>sub22</li>
</ul>
</div>
<div class="list">
<div id="menu">menu3</div>
<ul id="sub">
<li>sub31</li>
<li>sub32</li>
</ul>
</div>
</div>
<br/>
<!-- 鼠标经过的例子: -->
<div id="mouseover">
<div class="list">
<div id="menu">menu1</div>
<ul id="sub">
<li>sub11</li>
<li>sub12</li>
</ul>
</div>
<div class="list">
<div id="menu">menu2</div>
<ul id="sub">
<li>sub21</li>
<li>sub22</li>
</ul>
</div>
<div class="list">
<div id="menu">menu3</div>
<ul id="sub">
<li>sub31</li>
<li>sub32</li>
</ul>
</div>
</div>
</body>
</html>