Question

我有这个侧面标签面板，当我点击它时，它将激活一个外部div，在此期间，我希望底层div有他们所有的事件，如悬停在下拉菜单上停用和东西，基本上他们可以＆＃39; t点击基础div以在激活弹出窗口时更改页面。

这是我的小提琴：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）如何再次单击选项卡以将所有内容恢复正常。

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

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

演示：http://jsfiddle.net/10xr2uah/3/

Answer 3

试试这个：

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

}）;

Answer 4

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

其中temp0是您的div。

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

4 个答案:

演示：http://jsfiddle.net/10xr2uah/3/