如何使用JQuery/CSS在单击按钮时将div面板移动到所有其他div面板的下方？
如何使用JQuery/CSS在单击按钮时将div面板移动到所有其他div面板的下方？
提问于 2016-07-25 18:34:28
多个面板%1位于另一个面板的下方。
有一个移除面板的按钮。当用户单击按钮时，该面板应位于所有其他面板的下方。
例如:有10个面板彼此对齐。最终用户希望通过单击按钮删除Panel 2。它应该位于所有8个面板的下方，并成为第10个面板。(不需要更改其ID或值，只需移动而不带动画)
有没有人可以建议如何使用CSS或JQuery来做到这一点？
以下是供您参考的场景：
小提琴：https://jsfiddle.net/k5491Lg3/
<div id="accountInfo" class="accountInfo">
<div id="accountTrue">
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 1
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 1
<!-- End panel -->
<input type="button" id="toBeRemoved1" value="Remove it Later" />
</div>
<!-- End fieldset -->
</div>
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 2
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 2
<!-- End panel -->
<input type="button" id="toBeRemoved2" value="Remove it Later" />
</div>
<!-- End fieldset -->
</div>
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 3
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 3
<!-- End panel -->
<input type="button" id="toBeRemoved3" value="Remove it Later" />
</div>
<!-- End fieldset -->
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2016-07-25 21:31:07
尝尝这个,
HTML，
<div id="accountInfo" class="accountInfo">
<div id="accountTrue">
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 1
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 1
<!-- End panel -->
<input type="button" value="Remove it Later" class="btn-remove" />
</div>
<!-- End fieldset -->
</div>
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 2
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 2
<!-- End panel -->
<input type="button" value="Remove it Later" class="btn-remove" />
</div>
<!-- End fieldset -->
</div>
<div class="accout newAccountPanel wrapper">
<h3 class="boldText">
Play with Person 3
</h3>
<div class="fieldset OneAccordion person">
I AM SWEET PANEL 3
<!-- End panel -->
<input type="button" value="Remove it Later" class="btn-remove" />
</div>
<!-- End fieldset -->
</div>
</div>
</div>JS
$("#accountTrue").on("click", ".btn-remove", function(){
var thisElement = $(this).closest('.accout');
$(thisElement).appendTo("#accountTrue");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38565446
复制相关文章
相似问题
腾讯云开发者
