我是想做成这个效果：点击右边框里的小×，这个元素就会到左边，如图：，点击左边框里的这个×又会回到右边，我自己写了一些代码，但是现在还存在问题，第一次是成功了，来回点就不对了。<style>
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
margin: 5px 0 5px 10px;
}
a{
text-decoration: none;
}
#slider1,#slider2{
width: 100px;
border: 1px solid #333333;
float: left;
margin: 0 10px;
}
#slider1 li a,#slider2 li a{
margin-left: 5px;
}
#slider1 li a:first-child,#slider2 li a:first-child{
color: #848484;
}
</style>
<div id="slider">
<div id="slider1">
<ul>
</ul>
</div>
<div id="slider2">
<ul>
<li>
<a href="#" class = "yuansu">元素1</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素2</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素3</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素4</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素5</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素6</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素7</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素8</a>
<a href="#" class = "close">x</a>
</li>
<li>
<a href="#" class = "yuansu">元素9</a>
<a href="#" class = "close">x</a>
</li>
</ul>
</div>
</div>
<script>
var clientH1 = $("#slider1>ul").height();
var clientH2 = $("#slider2>ul").height();
$("#slider1").css("height","200");
if(clientH1>200){
$("#slider1").css({"overflowY":"scroll","height":"200"});
}
if(clientH2>200){
$("#slider2").css({"overflowY":"scroll","height":"200"});
}else{
$("#slider2").css("overflow","auto");
}
$("#slider2 li a.close").click(function(){
$(this).parent().remove();
var yuansu = $(this).siblings().html();
var Ul = $("#slider1>ul");
Ul.append("<li><a></a><a>x</a></li>");
Ul.children(":last").children(":first").addClass("yuansu");
Ul.children(":last").children(":first").attr("href","#");
Ul.children(":last").children(":first").append(yuansu);
Ul.children(":last").children(":first").siblings().addClass("close");
Ul.children(":last").children(":first").siblings().attr("href","#");
var clientH1 = $("#slider1>ul").height();
var clientH2 = $("#slider2>ul").height();
if(clientH1>200){
$("#slider1").css({"overflowY":"scroll","height":"200"});
}
if(clientH2>200){
$("#slider2").css({"overflowY":"scroll","height":"200"});
}else{
$("#slider2").css("overflow","auto");
}
$(".close").click(function(){
$(this).parent().remove();
})
$("#slider1 li a.close").click(function(){
console.log("10");
$(this).parent().remove();
var yuansu = $(this).siblings().html();
console.log(yuansu);
var Ul = $("#slider2>ul");
Ul.append("<li><a></a><a>x</a></li>");
Ul.children(":last").children(":first").addClass("yuansu");
Ul.children(":last").children(":first").attr("href","#");
Ul.children(":last").children(":first").append(yuansu);
Ul.children(":last").children(":first").siblings().addClass("close");
Ul.children(":last").children(":first").siblings().attr("href","#");
var clientH1 = $("#slider1>ul").height();
var clientH2 = $("#slider2>ul").height();
if(clientH1>200){
$("#slider1").css({"overflowY":"scroll","height":"200"});
}
if(clientH2>200){
$("#slider2").css({"overflowY":"scroll","height":"200"});
}else{
$("#slider2").css("overflow","auto");
}
$(".close").click(function(){
$(this).parent().remove();
})
})
})
</script>
添加回答
举报
0/150
提交
取消