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();
 });

<强> DEMO

Answer 2

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

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

Answer 3

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

$("#mask").toggle()

点击按钮。并使用style="display:none"

将掩码div放在方框div之前

如何添加div并在点击时删除相同的div

3 个答案: