这段JQ，怎么让 更多2 也实现下拉效果？怎么简单修改或加点实现呢？
<!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=gb2312" />
<style type="text/css">
<!--body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #dfd3b9;
background-repeat: repeat-x;
font-family:"宋体",Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
div, ul, li, ol, form, h1, h2, h3, h4, h5, h6, h7, img,p { margin: 0px; padding: 0px; list-style: none; }
img{border:0 none;}
a {
font-size: 12px;
color: #000000;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
/* -- 头部 -- */
.top{ width:970px; height:132px;}
.top .logo{ width:233px; height:120px; float:left;}
.top .con{ width:730px; height:120px; float:right;}
.top .con .lc{ width:630px; float:left;padding:40px; 0 0 20px}
.top .con .lc .tab_btn { height: 25px;}
.top .con .lc .tab_btn li { float: left; width: 40px; height: 25px;line-height: 25px; text-align: center; cursor: pointer;
font-weight: normal; font-size: 12px; margin:0 4px 0 0; }
.top .con .lc .tab_btn li a.here{
color: #fff;
font-weight: bold;
background-color: #77602a;display:block
}
.top .con .lc .tab_btn li a{ color: #e7dfca; font-weight: normal; background-color: #433412; display:block}
.top .con .lc .wrap {background-image: url();background-repeat: no-repeat;}
.top .con .lc .tab_box {}
.top .con .lc .tab_box .guang{width:600px;height:28px; overflow:hidden; padding:2px 0 0 0;}
.top .con .lc .tab_box .keyword{color: #fff;}
.top .con .lc .tab_box .guang .zltsearch_i{
width:510px;
height:25px;
font-size:14px;
color:#000;
line-height:25px;
float:left; margin:0 0 0 4px;}
.top .con .lc .tab_box .guang .zltsearch_s{
float:right;
background-image: url();
background-repeat: no-repeat;
height: 26px;
width: 71px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
border:0
}
.top .con .ls{ width:90px; float:right;}
.top .con .ls ul{ padding-top:40px}h2{font-size:12px}
#more{width:50px;height:25px;line-height:30px;color:#ccc;background-color:#333;}
#list{display:none;background:red;}
#list li{width:50px;height:28px;line-height:28px;color:#eee;background-color:#999; overflow:hidden}
.more_pra{position:relative;}
#morea{width:50px;height:25px;line-height:30px;color:#ccc;background-color:#333;}
#lista{display:none;background:red;}
#lista li{width:50px;height:28px;line-height:28px;color:#eee;background-color:#999; overflow:hidden}
-->
</style><script src="http://product.pcpop.com/js/jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
var oH2More = $('#more'), oUlList = $('#list'), st;
function mOver(){
clearTimeout(st);
oUlList.show();
}
function mOut(){
st = setTimeout(function(){
oUlList.hide();
}, 1);
}
oH2More.click(function(){
mOver();
}).hover(function(){
clearTimeout(st);
}, mOut);
oUlList.hover(mOver, mOut);
$('li', oUlList).click(function(){
oH2More.html();
mOut();
});
});
</script>
</head>
<body>
<div class="box">
<div class="top">
<div class="logo"></div>
<div class="con">
<div class="lc">
<ul class="tab_btn">
<li><a class="here" href="javascript:void(0)" id="tab8_1" onClick="shosearch(1);" target="_self"
onFocus="this.blur()">文字1</a>
</li>
<li class="more_pra">
<h2 id="more">更多1</h2>
<ul id="list">
<li><a href="javascript:void(0)" id="tab8_2" onClick="shosearch(2);" target="_self" onFocus="this.blur
()">文字2</a></li>
<li><a href="javascript:void(0)" id="tab8_3" onClick="shosearch(3);" target="_self" onFocus="this.blur
()">文字3</a></li>
</ul></li><li class="more_pra">
<h2 id="morea">更多2</h2>
<ul id="lista">
<li><a href="javascript:void(0)" id="tab8_4" onClick="shosearch(4);" target="_self" onFocus="this.blur
()">文字4</a></li>
</ul></li>
</ul>
<div class="wrap">
<div class="tab_box">
<div class="guang">
</div>
<div class="keyword">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案 »
- ActiveX 中线程中发送消息 javascript不响应
- Jquery怎么读取XML 匹配的值呢
- 在ifram中应用lightbox效果，无法全屏显示，只在ifram中显示，有没有解决办法？
- 如何用js画图表，如bar chart
- js post数据问题
- 问一个JS语句是什么意思
- s_liangchao1s 请进
- 如何把Excel表格转换成html页面，并且Excel原有的筛选功能在html页面上还是可以实现的
- js获取easyui datagrid中的数据，并拼接成json
- 自动返回的问题,急!
- 能够隐藏Javascript代码么？
- IE9中external.menuArguments.location.href的问题
$(document).ready(function(){
$(".more_pra").click(function(){$(this).children("ul").show();}).hover(function(){$(this).children("ul").show();}, function(){$(this).children("ul").hide()});
});说明：.more_pra 获得class是more_pra的对象
而不用$(document).ready(function(){
$("h2[id^=more]").click(function(){$(this).siblings("ul").show();}).hover(function(){$(this).siblings("ul").show();}, function(){$(this).siblings("ul").hide()});
});这个是为了提供一个“保持在其中”的状态
var oH2More = $('.more_pra h2');
var oUlList = $('.more_pra ul');
var st;
function mOver(obj){
clearTimeout(st);
$(obj).next("ul").show();
}
function mOut(){
st = setTimeout(function(){
oUlList.hide();
}, 1);
}
oH2More.click(function(){
mOver(this);
}).hover(function(){
clearTimeout(st);
}, mOut);
oUlList.hover(mOver, mOut);
$('li', oUlList).click(function(){
oH2More.html();
mOut();
});
});我大概修改了一下，基本可以实现，其他的函数还得楼主自己修改。
click没起效果？鼠标移到就下拉了？
$(".more_pra").click(function(){$(this).children("ul").show();}).children("ul").hover(function(){$(this).show();}, function(){$(this).hide()});
});</script>
解释：more_pra 点击时显示ul，并对more_pra的子元素("ul")注册hover事件