Question

我有两个元素在彼此之上。当我单击第一个div上的一个按钮时，第二个div在第一个div的顶部打开，而我想要做的是使底层div非交互式（我不能点击underlaying-div上的任何内容）只要覆盖div是开放的。）

Javascript代码：

  $('#button').live('click', function()
  {    
      $('#underlaying-div).fadeTo("fast", 0.7);
      $('#overlaying-div).css('display', 'block');

      //Do something here to make the underlaying div unclickable
  });

  $("#overlaying-div").live("click", function() {
     $(this).hide();

     $('#underlaying-div).fadeTo("slow", 1.0);

     //Do something here to make the underlaying div clickable again
  });

CSS代码：

 #overlay-div
 {
    position:absolute;
    left:0;
    top:0;
    display:none;
    z-index: 20000;    
 }

我知道如果你单击underlaying-div中的一个元素，我可以使用event.preventDefault（）来确保没有任何反应，但是当你将鼠标悬停在一个按钮上时，我宁愿没有任何事情发生（使用preventDefault（），悬停和其他东西仍然会发生。）

CSS或javascript / JQuery中可以解决此问题的任何其他方法吗？

Answer 1

不确定你的最终产品，但如果基础div与重叠相互重叠，导致底层div不再可见，你只能display:block;底层div。

Answer 2

您可以使用unbind删除click事件处理程序，如下所示：

$(this).unbind('click'):

我担心的是，如果这适用于实时绑定，但您至少应该尝试它：）

Answer 3

为什么不使用jQuery .fadeIn()和.fadeOut()函数？您有id="div1"和id="div2"两个div，并且div1的{{1}}按钮和id="button1"的按钮div2。 CSS代码：

id="button2"

jQuery代码：

#div1 {
   //some CSS code without z-index
}

#div2 {
   //some CSS code without z-index
   visibility:hidden;
}

Answer 4

这是一个非常古老的问题，但如果有人发现它，您可能会发现切换要禁用的对象的指针事件CSS属性很有用。您无需手动删除单击绑定或添加任何其他包装器。如果对象的指针事件设置为“无”，则单击它时不会触发任何事件。

在jQuery中：

$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable

如何使底层元素不可点击/停用？

4 个答案: