Javascript 如何在点击按钮时使div在最近的div下方淡入？_Javascript_Jquery_Html_Css

Javascript 如何在点击按钮时使div在最近的div下方淡入？

javascript jquery html css

Javascript 如何在点击按钮时使div在最近的div下方淡入？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好的，我在每个div中都有相同的按钮。单击它时，我希望Div4显示在用户按下按钮的div下。所以，例如，若用户在Div2内按下按钮，则Div4将出现在Div2和Div3之间。它将向下推动Div3，而不是出现在/隐藏Div3上希望通过jQuery，如何实现这一点多谢各位 $（“#按钮”）。单击（函数（）{ $（#Div4'）。法代因（200）； }); 正文{ 颜色：白色；文本对齐：居中； } #钮扣{ 宽度：40px；高度：20px；背景：棕色；光标：指针；左边距：自动；右边距

好的，我在每个div中都有相同的按钮。单击它时，我希望Div4显示在用户按下按钮的div下。所以，例如，若用户在Div2内按下按钮，则Div4将出现在Div2和Div3之间。它将向下推动Div3，而不是出现在/隐藏Div3上

希望通过jQuery，如何实现这一点

多谢各位

$（“#按钮”）。单击（函数（）{
$（#Div4'）。法代因（200）；
});
正文{
颜色：白色；
文本对齐：居中；
}
#钮扣{
宽度：40px；
高度：20px；
背景：棕色；
光标：指针；
左边距：自动；
右边距：自动；
}
#第一组{
宽度：100px；
高度：50px；
背景：蓝色；
}
#第二组{
宽度：100px；
高度：50px；
背景：绿色；
}
#第三组{
宽度：100px；
高度：50px；
背景：紫色；
}
#第四组{
宽度：100px；
高度：50px；
背景：红色；
}

第一组
点击
第二组
点击
第三组
点击
以下是一个可能的解决方案：
使用如下所示的类，而不是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);
});


第一组
点击
第二组
点击
第三组
点击
var div4Content=“”+
“第四组”+
“点击”+
'';
$（'.button'）。单击（函数（）{
$（this）.parent（）.after（div4Content）；
});
首先，id必须是唯一的，不能重复id=“Button”
。你应该为此使用一个类
您可以使用.after（）
在当前DIV之后移动#Div4
，然后淡入

$（'.Button'）。单击（函数（）{
$（this.parent（）.after（$（'#Div4'）.fadeIn（200））；
});
正文{
颜色：白色；
文本对齐：居中；
}
.按钮{
宽度：40px；
高度：20px；
背景：棕色；
光标：指针；
左边距：自动；
右边距：自动；
}
#第一组{
宽度：100px；
高度：50px；
背景：蓝色；
}
#第二组{
宽度：100px；
高度：50px；
背景：绿色；
}
#第三组{
宽度：100px；
高度：50px；
背景：紫色；
}
#第四组{
宽度：100px；
高度：50px；
背景：红色；
}

第一组
点击
第二组
点击
第三组
点击
第四组
HTML中没有Div4
。