jquery带定时器的多个下拉菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
*{ margin:0; padding:0; list-style:none;}
.list{ width:800px;}
.pl-text{padding: 20px 0; font-size: 14px; height: 21px;}
.pl-fr{float: right; position: relative; z-index: 1;}
.-box{
position: absolute;
top: 30px;
left: 28px;
background: #fff;
padding: 5px 10px;
border: solid 1px #e2e2e2;
display: none;
}
.-box em{ display:block;width: 80px; margin: 5px 0;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var isShow=true;
var date;
$("a.fenxiang").hover(function(){
var item=$(this).next("div");
item.show();
},function(){
$(".-box").hover(function(){
isShow=false;
$(this).show();
},function(){
isShow=true;
$(this).hide();
});
date=setInterval(hided,2000);
})
function hided(){
if(isShow){
$(".-box").hide();
clearInterval(date);
}
}
});
/*$("a.fenxiang").each(function(i,obj){
$(obj).hover (
function(){$(this).next('div').stop(true,true).slideDown();},
function(){$(this).next('div').stop(true,true).fadeOut();}
);
});*/
/*$('a.fenxiang').hover(function(){
$(this).next('div.-box').stop(true,true).slideDown();
},function(){
$(this).next('div.-box').stop(true,true).slideUp();
})*/
</script>
</head>
<body>
<ul class="list">
<li>
<div class="list-col">
<a href="#"><h2>中国信保报告：政治风险制约中国企业全球布局</h2></a>
<p>人民币中间价跌逾200基点逼近6.70 中国人民银行授权中国外汇交易中心公布，2016年9月12日银行间外汇市场人民币汇率中间价为1美元对人民币6.6908元...<a href="#">[详细]</a></p>
<div class="pl-text">
<div class="pl-fl">
<b>今天01:00</b>
<a href="#">cpi</a>
<a href="#">涨幅</a>
<a href="#">货币政策</a>
</div>
<div class="pl-fr">
<a class="pinglun" href="javascript://">评论</a> |
<a class="fenxiang" href="javascript://">分享</a>
<div class="-box">
<i><a href="javascript://" class=" _sina">新浪微博</a></i>
<i><a href="javascript://" class=" _qqkongjian">QQ空间</a></i>
<i><a href="javascript://" class=" _weixin">微信</a></i>
<i><a href="javascript://" class=" _qq">QQ好友</a></i>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="list-col">
<a href="#"><h2>中国信保报告：政治风险制约中国企业全球布局</h2></a>
<p>人民币中间价跌逾200基点逼近6.70 中国人民银行授权中国外汇交易中心公布，2016年9月12日银行间外汇市场人民币汇率中间价为1美元对人民币6.6908元...<a href="#">[详细]</a></p>
<div class="pl-text">
<div class="pl-fl">
<b>今天01:00</b>
<a href="#">cpi</a>
<a href="#">涨幅</a>
<a href="#">货币政策</a>
</div>
<div class="pl-fr">
<a class="pinglun" href="javascript://">评论</a> |
<a class="fenxiang" href="javascript://">分享</a>
<div class="-box">
<i><a href="javascript://" class=" _sina">新浪微博</a></i>
<i><a href="javascript://" class=" _qqkongjian">QQ空间</a></i>
<i><a href="javascript://" class=" _weixin">微信</a></i>
<i><a href="javascript://" class=" _qq">QQ好友</a></i>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="list-col">
<a href="#"><h2>中国信保报告：政治风险制约中国企业全球布局</h2></a>
<p>人民币中间价跌逾200基点逼近6.70 中国人民银行授权中国外汇交易中心公布，2016年9月12日银行间外汇市场人民币汇率中间价为1美元对人民币6.6908元...<a href="#">[详细]</a></p>
<div class="pl-text">
<div class="pl-fl">
<b>今天01:00</b>
<a href="#">cpi</a>
<a href="#">涨幅</a>
<a href="#">货币政策</a>
</div>
<div class="pl-fr">
<a class="pinglun" href="javascript://">评论</a> |
<a class="fenxiang" href="javascript://">分享</a>
<div class="-box">
<i><a href="javascript://" class=" _sina">新浪微博</a></i>
<i><a href="javascript://" class=" _qqkongjian">QQ空间</a></i>
<i><a href="javascript://" class=" _weixin">微信</a></i>
<i><a href="javascript://" class=" _qq">QQ好友</a></i>
</div>
</div>
</div>
</div>
</li>
</ul>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
