javascript - Javascript 中的 GUI 项目和元素

Question

我如何制作类似于这些的盒子？我想要右上角有一个 X。其左侧的文本以及黑色区域所在图像下方的文本。当我单击 X 时，它将删除这些内容，并且右侧的框会移动并取代它。我如何使用 jquery 创建这个？是否有某种 GUI 和容器可以用来在关闭/删除盒子等时自动移动盒子

Answer 1

如果你不想要任何花哨的滑动等动画效果，它实际上只是一点CSS:

<style>
    .itembox {float:left;}
</style>

如果所有盒子的宽度均匀地适合容器(例如，每个盒子的宽度为 100 像素，容器的宽度为 300 像素)，那么它们将彼此相邻堆叠，直到到达容器的边界，然后向左换行并再次堆叠。

<div class="itembox"> <a href="#" class="close">x</a> ... </div>
<div class="itembox"> <a href="#" class="close">x</a> ... </div>
<div class="itembox"> <a href="#" class="close">x</a> ... </div>

设置 display:none 将从文档流中删除该文档流并隐藏它，因此它后面的文档将会折叠回来。在 JavaScript 中，在关闭按钮的单击事件上，将相应的项目框的显示设置为无:

$('.itembox .close').click(function() {
    $(this).parent('.itembox').hide();
});

在 jQuery 中，hide() 设置 display:none。