好的，所以我在每个 div 中都有相同的按钮。单击时，我希望 Div4 出现在用户按下按钮的 div 下方。因此，例如，如果用户在 Div2 内按下 Button，则 Div4 将出现在 Div2 和 Div3 之间。它会将 Div3 向下推，而不是出现在/隐藏 Div3 上。
如何实现这一点(希望通过 jQuery)？
谢谢。
$('#Button').click(function() {
$('#Div4').fadeIn(200);
});body {
color: white;
text-align: center;
}
#Button {
width: 40px;
height: 20px;
background: brown;
cursor: pointer;
margin-left: auto;
margin-right: auto;
}
#Div1 {
width: 100px;
height: 50px;
background: blue;
}
#Div2 {
width: 100px;
height: 50px;
background: green;
}
#Div3 {
width: 100px;
height: 50px;
background: purple;
}
#Div4 {
width: 100px;
height: 50px;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Div1">
Div1
<div id="Button">Click</div>
</div>
<div id="Div2">
Div2
<div id="Button">Click</div>
</div>
<div id="Div3">
Div3
<div id="Button">Click</div>
</div>
</body>最佳答案
这是一个可能的解决方案:http://jsfiddle.net/2nxd6fon/7/
不要使用相同的 div ID(这不是正确的方法)，而是使用如下所示的类，
[由于我在您的 HTML 中没有看到 Div4，所以我采取了以下方法。]
<body>
<div id="Div1">
Div1
<div class="button">Click</div>
</div>
<div id="Div2">
Div2
<div class="button">Click</div>
</div>
<div id="Div3">
Div3
<div class="button">Click</div>
</div>
</body>
var div4Content = '<div id="Div4">'+
'Div4'+
'<div class="button">Click</div>'+
'</div>';
$('.button').click(function() {
$(this).parent().after(div4Content);
});
关于javascript - 如何让div在按钮点击时淡入下面最近的div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30336242/