如何在外部div激活期间禁用底层div上的所有内容

Question

我有一个侧边面板，当我点击它时，会激活一个外部的div，在此期间，我希望底层的div所有事件（如悬停下拉菜单等）都被禁用，基本上在弹出的div激活时，他们不能点击底层div以更改页面。

这是我的fiddle：http://jsfiddle.net/10xr2uah/，现在我只改变了透明度，但用户仍然可以悬停在下拉菜单上并在弹出面板打开时更改页面，我尝试过像 $(".container").attr('disabled'，'disabled');，但它不起作用。

另外我还有...

$(function() {
   $("#toggle").click(function() {
        $(".log").html("panel sliding out");
        $("#toggle_content").animate({width:'toggle'},350);
        $(".container").css("opacity", 0.3);

        $(".container").click(function() {
            $(this).unbind("click");
            $(".log").html("panel hide success");
            $("#toggle_content").hide();
            $(".container").css("opacity", 1);
        }); 
    });

});

我该如何编辑代码，使得当我点击选项卡时，它会打开，再次点击时会关闭，并且不透明度恢复正常？

如果你感到困惑，基本上我正在尝试解决以下问题： 1）如何在弹出div激活时禁用背景div（禁用悬停时的下拉扩展） 2）如何再次点击选项卡以将所有内容恢复正常。

- Devon

---

你有检查过 $("item").prop("disabled", true); 吗？它大多数情况下都有效。 - Mostafa Talebi

尝试使用jQuery的on和off方法。http://api.jquery.com/off/ - SKG

Answer 1

当我遇到类似的情况时，我创建了一个简单的覆盖层来覆盖选项卡面板并停止触发选项卡上的事件。
HTML

 <div class="container">
          <div class="overlay"></div> // create a overlay
        <div class="log_container sixteen columns">
            <p class="two column">Log:</p>

JS

$(function () {
        $("#toggle").click(function () {
            $(".log").html("panel sliding out");
            $("#toggle_content").animate({
                width: 'toggle'
            }, 350);
            $('.overlay').show();
        });
    });

CSS

.overlay {
     position: absolute;
    top: 0px;
    left: 0px;
    width: 960px;
    height: 65px;
    z-index: 100;
    display: none;
    opacity: 0.7;
    background-color: white;
    }

UPDATED FIDDLE

- StateLess

---

工作得很好，但我认为这不是最好的做事方式。希望在进程中能够得到更好的答案！感谢您的帮助。 - Devon

Answer 2

您可以使用容器的伪元素:before来创建视觉叠加效果。这样，您就不必向HTML中添加新元素：

.container.overlay-disable:before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(220, 220, 220, .6);
}

JS:

$("#toggle").click(function () {
    $(".log").html("panel sliding out");
    $("#toggle_content").animate({
        width: 'toggle'
    }, 350);
    $(".container").addClass("overlay-disable");
    $(".container").click(function () {
        $(".log").html("panel hide success");
        $("#toggle_content").hide();
        $(".container").removeClass("overlay-disable");
    });
});

Demo: http://jsfiddle.net/10xr2uah/3/

- dfsq

---

短问题：它对我的内容有效，但不适用于内容中的图像，似乎图像将绕过覆盖层类。我该如何解决？ - Devon

容器中有图像吗？ - dfsq

是的，我复制并粘贴了下拉菜单到图像下方，顶部和底部的下拉菜单都成功隐藏了，但是中间的图像没有被隐藏。 - Devon

我认为你需要调整覆盖层的z-index数值：http://jsfiddle.net/10xr2uah/4/ - dfsq

Answer 3

for (let x of temp0.querySelectorAll('*')) {
  x.disabled = true;
}

其中temp0是您的div。

- Andrew

Answer 4

试试这个：

http://jsfiddle.net/10xr2uah/2/

HTML

<div class="mask"></div>

CSS 更改

.mask{
    background:rgba(255,255,255,0.3);
    position:absolute;
    left:0;
    right:0;
    top:0;
    display:none;    
}

JS的更改如下所示

$(function() {
  $('.mask').height(parseInt($('.log_container').height()+$('#navigation').height()));
   $("#toggle").click(function() {

        $(".log").html("panel sliding out");
        $("#toggle_content").animate({width:'toggle'},350);
        $('.mask').show();

        $(".container").click(function() {
            $(this).unbind("click");
            $(".log").html("panel hide success");
            $("#toggle_content").hide();                
            $('.mask').hide();
        }); 
    });

});

- Vinita Rathore