您的位置：首页 > Web前端 > JQuery

一个div，弹出第二个div的浮动。

2017-11-15 15:57 267 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.div-css{
border: 1px solid #51C7C9;
padding: 0 5px;
color: white;
background: #51C7C9;
font-size: 16px;
height: 100px;
width: 100px;
display: inline-block;
text-align: center;
}

.div-css-float{

//如果像在Div 旁边加一个

position: absolute;

border: 1px solid black;
padding: 0 5px;
color: white;
background: black;
font-size: 16px;
height: 200px;
width: 200px;
display: inline-block;
}
</style>
<body>
<div class="div-css">个人信息,点击查看</div>
</body>

<script src="../jquery/dist/jquery.js"></script>
<script>

$(document).on("click",".div-css",function(){
var a ="<div class='div-css-float'></div>"
if($(this).next().hasClass("div-css-float") ){
$(this).next().remove("div");
}else{
$(this).after(a);
message();
}
})
function message(){
$(".div-css-float").html("你好，我是于生。很高兴认识你")
}
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery css3

相关文章推荐

新的分享

章节导航