Question

我正在我的网页上打开一个弹出菜单。菜单包含各种可选项目，我想只允许在进行顶部选择后选择某些项目。现在我可以隐藏所有项目，但这会让弹出看起来很奇怪。我宁愿展示它们，但是暗淡了。我的想法是将后续选择包含在div中，并使该div充当阻止者。现在的问题是如何做到这一点 - 我尝试将selBlocker div的z-index设置得高于其余部分，同时给它绝对定位，但还没有到达任何地方。我正在使用javascript库来处理一般的选择。

<div id="SelPopup" >
    <div id="topSelect"></div>

    <div id="selBlocker">
         <div id="selectable2"></div>
         <div id="selectable3"></div>
    </div>
</div>

Answer 1

我会将一个类附加到您不想选择的项目，并将not（）选择器添加到您的jQuery。

例如：

$("div:not('.selected').....

而不是

$("div").....

当然，你可以为类.selected添加一个不透明度，使其稍微不那么明显。

Answer 2

您可以尝试以下内容：

而不是使用id选择被阻止元素使用class="selectBlocked"而不是使用菜单div使用class="selectMenu"

<div id="SelPopup" >
    <div id="topSelect" class="selectMenu"></div>

    <div id="selBlocker1" class="selectMenu selectBlocked">
         <div id="selectable2"></div>
         <div id="selectable3"></div>
    </div>
   <div id="selBlocker4" class="selectMenu selectBlocked">
         <div id="selectable5"></div>
         <div id="selectable6"></div>
    </div>
</div>

现在正确jQuery用于处理菜单选择，如果选择的菜单是class =“selectBlocked”，则不执行任何操作

$('.selectMenu').click(function(){
     if($(this).hasClass("selectBlocked"))
        return false;

    // do your stuff if above condition fails
});

Answer 3

谢谢大家的建议，我实际上找到了我想要的东西：

$("#selBlocker").css("pointer-events", "none");

这将很好地禁用所有交互，并使用

$("#selBlocker").css("pointer-events", "all");

我可以恢复它。可以轻松地添加不透明度的变化。

如何临时阻止可选元素

3 个答案: