css
.modeWin{width: 300px;height: 200px;border: 1px solid #000;margin-bottom:30px;} .contant div{ width: 300px;height: 200px; font-size: 16px;color:pink; border: 1px solid #000; } .contant div p{cursor:pointer;} .btnshow{position:absolute;right:20px;top:20px;} p{cursor:pointer;}
html
<div class="modeWin"> </div> <div class="contant"> <button class="btnJia" style="margin-bottom:10px;">+</button> <div style="position:relative;"> <button οnclick="btnjian(this)" class="btnshow" style="display:none">减去</button> <p>我是第一个盒子</p> </div> <div style="position:relative;top:20px;"> <button οnclick="btnjian(this)" class="btnshow" style="display:none">减去</button> <p>我是第二个盒子</p> </div> </div>
javascript
$('.btnJia').click(function(event) { $('.btnshow').show(300); }); var container = {}; //用这个键值对存储元素对应的此时父元素的值,一个对应关系 function btnjian(self){ var parentElemt = $(self).parent().html(); var childP = $(self).parent().children('P').text(); $(self).parent().hide(400); var flag = new Date().getTime(); var pElemt = $('<p flag='+flag+' οnclick="childp(this)">'+childP+'</p>'); $('.modeWin').append(pElemt); container[flag] = parentElemt; } function childp(self){ // alert() var flag = $(self).attr('flag'); var box = $('<div style=position:relative;top:10px;bottom:10px;>'); // console.log(container[flag]) box.append(container[flag]) $('.contant').append(box); }