关于用JQuery写标题展开的问题(效果类似微博点击标题展开内容) 本帖最后由 a495303569 于 2012-08-26 00:11:50 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>测试</title><script type="text/javascript" language="javascript" src="你的jQuery路径"></script><style type="text/css"> .container{width:200px;} .container ul{ list-style:none;float:left;width:100%;border:1px solid #bfbfbf;text-align:left;} .container ul li{ list-style:none;float:left;width:100%;text-align:left;padding-left:5px;}</style><script type="text/javascript">$(function(){ $('.container ul li').append(function(i){return '<div class="content" style="display:none;"></div>'}) $('.container ul li').bind({ "click":function(){ $(this).parent().find('.content').hide();//如果不需要只保持最多打开一个,这行注释掉 var content="这里是标题"+parseInt($(this).index()+1)+"的内容";//这里为了测试方便做个标记而已,实际运用中可用ajax异步加载内容,或者你内容已经存在的话就不用了 $(this).find('.content').html(content).show('slideout'); }, "blur":function(){ $(this).find('.content').hide(); } })})</script></head><body><div class="container"><ul><li>这里是标题1</li><li>这里是标题2</li></ul></div></body></html> $('.container ul li').append(function(i){return '<div class="content" style="display:none;"></div>'});上面这句你也可以直接写成 $('.container ul li').append('<div class="content" style="display:none;"></div>');原本是想给每个内容层附加一个不面的ID的,后面发现不需要。 这样写更好些:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>测试</title><script type="text/javascript" language="javascript" src="你的jQuery路径"></script><style type="text/css"> .container{width:200px;} .container ul{ list-style:none;float:left;width:100%;border:1px solid #bfbfbf;text-align:left;} .container ul li{ list-style:none;float:left;width:100%;text-align:left;cursor:pointer;}</style><script type="text/javascript">$(function(){ var i=-1; $('.container ul li').bind({ "click":function(){ if(!$(this).find('.content')[0]){$(this).append('<div class="content" style="display:none;"></div>')} if($(this).index()!=i){ $(this).parent().find('.content').hide();//如果不需要只保持最多打开一个,这行注释掉 var content="这里是标题"+parseInt($(this).index()+1)+"的内容";//这里为了测试方便做个标记而已,实际运用中可用ajax异步加载内容,或者你内容已经存在的话就不用了 $(this).find('.content').html(content).show('slideout'); i=$(this).index(); } } })})</script></head><body><div class="container"><ul><li>这里是标题1</li><li>这里是标题2</li></ul></div></body></html> 正则查看html控件一个属性 发布一个高效的JavaScript分析、压缩工具: JSA 这段JS怎么解密? 关于childNode和parentElement触发相同事件问题 怎样检测系统是否安装了 RealPlayer ? 能不能在一个网页关闭前转到另一个网页? 把字符窜当一条命令来执行怎么做? IE中下拉列表框<Select></select>总在最上层,设了 style中 Z-index也无用. 求助,500分求我内部要求的菜单原码! 局部刷新问题 如何用JQuery实现网页DIV拖动跟其他DIV互换位置 利用MVC传回JSON传回的时间格式化
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<script type="text/javascript" language="javascript" src="你的jQuery路径"></script>
<style type="text/css">
.container{width:200px;}
.container ul{ list-style:none;float:left;width:100%;border:1px solid #bfbfbf;text-align:left;}
.container ul li{ list-style:none;float:left;width:100%;text-align:left;padding-left:5px;}
</style>
<script type="text/javascript">
$(function(){
$('.container ul li').append(function(i){return '<div class="content" style="display:none;"></div>'})
$('.container ul li').bind({
"click":function(){
$(this).parent().find('.content').hide();//如果不需要只保持最多打开一个,这行注释掉
var content="这里是标题"+parseInt($(this).index()+1)+"的内容";//这里为了测试方便做个标记而已,实际运用中可用ajax异步加载内容,或者你内容已经存在的话就不用了
$(this).find('.content').html(content).show('slideout');
},
"blur":function(){
$(this).find('.content').hide();
}
})
})
</script>
</head>
<body>
<div class="container">
<ul>
<li>这里是标题1</li>
<li>这里是标题2</li>
</ul>
</div>
</body>
</html>
$('.container ul li').append('<div class="content" style="display:none;"></div>');原本是想给每个内容层附加一个不面的ID的,后面发现不需要。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<script type="text/javascript" language="javascript" src="你的jQuery路径"></script>
<style type="text/css">
.container{width:200px;}
.container ul{ list-style:none;float:left;width:100%;border:1px solid #bfbfbf;text-align:left;}
.container ul li{ list-style:none;float:left;width:100%;text-align:left;cursor:pointer;}
</style>
<script type="text/javascript">
$(function(){
var i=-1;
$('.container ul li').bind({
"click":function(){
if(!$(this).find('.content')[0]){$(this).append('<div class="content" style="display:none;"></div>')}
if($(this).index()!=i){
$(this).parent().find('.content').hide();//如果不需要只保持最多打开一个,这行注释掉
var content="这里是标题"+parseInt($(this).index()+1)+"的内容";//这里为了测试方便做个标记而已,实际运用中可用ajax异步加载内容,或者你内容已经存在的话就不用了
$(this).find('.content').html(content).show('slideout');
i=$(this).index();
}
}
})
})
</script>
</head>
<body>
<div class="container">
<ul>
<li>这里是标题1</li>
<li>这里是标题2</li>
</ul>
</div>
</body>
</html>