jquery - 如何在单击时添加 div 和删除相同的 div

Question

编辑

说我的页面如下

<div id="mask">content</div> 
<div id="box">content</div>

div 掩码从页面中隐藏。如何使它在单击时显示并在单击同一按钮时再次隐藏。

要么那个，要么我可以

<div id="box">content</div> 
<div id="mask">content</div>

两者都在页面上可见，但我希望 #mask 在单击时移回 #box 之前，然后在再次单击时返回到原始状态。

Answer 1

你可以试试

  $('#box').on('click', function() {
    if($(this).prev('#mask').length) {
       $(this).prev('#mask').toggle();
    } else {
      $(this).next('#mask').insertBefore(this);
    }
 });
 // code for mask hide on its click
 $('#mask').on('click', function() {
   $(this).hide();
 });

演示

Answer 2

为您需要的操作保留一个标志。像这样的东西：

var flag='firstClick';
$('#box').on('click', function(){
    if (flag == 'firstClick') {
        $('#box').insertBefore($(this));
        flag = 'notFirstClick';
    }
    else $('#box').remove();
})

Answer 3

如果您只想隐藏它，则不必删除它。您可以使用

$("#mask").toggle()

点击按钮。并将掩码 div 放在框 div 之前style="display:none"