Javascript 再次单击时，将div项移动到div容器的顶部

!

我想实现的是，当单击每个项目时，移动在div容器顶部单击的div项目…其余项目（未单击的项目）将分别填充div容器的其余部分

HTML

    <div class="row">
        <div class="col-md-12">
            <div class="containing_div">
                <div class="container_div"></div>
                <div class="menu_div">
                    <div class="item_div">Photos</div>
                    <div class="item_div">Video</div>
                    <div class="item_div">Music</div>
                    <div class="item_div">Files</div>
                    <div class="item_div">Contacts</div>
                </div>
            </div>
        </div>
    </div>

---

如果我正确理解了您的需求，那么您可以通过使用一点jQuery来实现您的目标，这要归功于

prependTo

方法

以及jQuery函数

$('.item_div').on('click',function(){
    $(this).prependTo('.container_div');
});

更新：

如果您想简单地交换位置，可以使用一个变体

$('.item_div').on('click',function(){
    $(this).prependTo('.menu_div');
});

---

单击div时，使用javascript操纵div的

z-index

。我假设您指的是

item\u div

？例如…是的..我指的是“item\u div”好的，我将用jsfiddle编写一个答案..请编写jsfiddle..这实际上不起作用..在我的示例中，只是从div容器中删除div项，从

.menu div

中删除它们，并将它们放入

.container\u div

中。没问这个吗？他可能想要这个：将div移到列表的顶部。如果是这样，只需将“.container\u div”更改为“.menu\u div”否我没有问这个问题…交换.item\u div的位置。menu\u div当单击一个item div时，我希望特定的项移动到menu div的顶部。我解决了问题。我只使用了$（this）.prependTo（.menu div）

$('.item_div').on('click',function(){
    $(this).prependTo('.menu_div');
});