首页 新闻 搜索 专区 学院

代码写的不对如果我点击当前这个,显示,然后我不点击让他关闭接着点击下一个,就出现两个都显示了

0
[已解决问题] 解决于 2016-05-10 11:47
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table.tab {
width: 1020px;
margin-top: 38px;
position: relative;
}
table.tab tr td {
border: 1px solid #b4b4b4;
padding: 12px;
text-align: center;
color: #333;
}
table.tab tr td > a:hover {
color: blue;
text-decoration: underline!important;
}
table.tab .row-1 {
background-color: #e3e3e3;
}

.dialog {
position: relative;
}
.test {
display: none;
width: 280px;
padding: 8px;
border: 2px solid #ddd;
position: absolute;
top: 28px;
left: 58px;
background-color: #f7fffb;
z-index: 99;
}
.test table {
width: 258px;
background-color: white;
}
.test table td {
padding: 2px!important;
}

</style>
</head>
<body>
<div class="tables">
<div class="recent">
<h5>交易记录 <span class="lv">查看更多交易</span></h5>
<table class="tab">
<tr class="row-1">
<td>创建时间</td>
<td>交易类型</td>
<td>金额|明显</td>
<td>状态</td>
</tr>
<tr>
<td>2016.4.14 16:25</td>
<td>充值</td>
<td class="lv dialog">+100.00 <i class="btns">点击</i>
<div class="test">
<table cellpadding="1" cellspacing="1" class="tb-more">
<tr>
<td>充值方式:线上充值</td>
<td>卡号:后四位8888</td>
</tr>
<tr>
<td colspan="2">付款时间:2016.4.11 16:50:50</td>
</tr>
</table>
</div>
</td>
<td>交易成功</td>
</tr>
<tr>
<td>2016.4.14 16:25</td>
<td>充值</td>
<td class="lv dialog">+100.00 <i class="btns">点击</i>
<div class="test">
<table cellpadding="1" cellspacing="1" class="tb-more">
<tr>
<td>充值方式:线上充值</td>
<td>卡号:后四位8888</td>
</tr>
<tr>
<td colspan="2">付款时间:2016.4.11 16:50:50</td>
</tr>
</table>
</div>
</td>
<td>交易成功</td>
</tr>
<tr>
<td>2016.4.14 16:25</td>
<td>充值</td>
<td class="lv dialog">+100.00 <i class="btns">点击</i>
<div class="test">
<table cellpadding="1" cellspacing="1" class="tb-more">
<tr>
<td>充值方式:线上充值</td>
<td>卡号:后四位8888</td>
</tr>
<tr>
<td colspan="2">付款时间:2016.4.11 16:50:50</td>
</tr>
</table>
</div>
</td>
<td>交易成功</td>
</tr>
<tr>
<td>2016.4.14 16:25</td>
<td>充值</td>
<td class="lv dialog">+100.00 <i class="btns">点击</i>
<div class="test">
<table cellpadding="1" cellspacing="1" class="tb-more">
<tr>
<td>充值方式:线上充值</td>
<td>卡号:后四位8888</td>
</tr>
<tr>
<td colspan="2">付款时间:2016.4.11 16:50:50</td>
</tr>
</table>
</div>
</td>
<td>交易成功</td>
</tr>

</table>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$().ready(function(){
$(".btns").each(function(index){
$(this).click(function(){
if($(this).next().is(":hidden")){
$(this).next().show();
}else{
$(this).next().hide();
}
});

})

});

console.log($(".btns").next());
</script>

</body>
</html>
前端学步的主页 前端学步 | 菜鸟二级 | 园豆:211
提问于:2016-04-28 10:54
< >
分享
最佳答案
0
    $().ready(function(){
        $(".btns").click(function(){
          $(".btns").not(this).next().hide();
          $(this).next().toggle();
        });
    });

http://jsbin.com/genifo/edit?html,output

奖励园豆:5
刘宏玺 | 专家六级 |园豆:14020 | 2016-04-28 11:37

哇!我大意了,漏了一部分.. 

RosonJ | 园豆:4910 (老鸟四级) | 2016-04-28 11:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册