如何暂时阻止可选元素

我正在处理我的网页上的弹出式菜单。菜单包含各种可选项目，我只想在顶部选择后选择某些项目。现在我可以隐藏所有项目，但这会让弹出窗口看起来很奇怪。我宁愿让他们看，但黯然失色。我的想法是把后续选择放在一个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>

来源

2014-05-21 Beza

你可以设置第一个例子作为jsfiddle吗？ –

谢谢大家的建议，我真的发现了wh在我一直在寻找：

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

这将很好地禁用所有的互动，并与

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

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

来源

2014-05-21 12:39:14 Beza

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

例如：

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

而不是

$("div").....

Ofcourse，你可以不透明度增加.selected类，让它一点点不太明显。

来源

2014-05-21 12:30:54

你可以试试下面：

而不是使用id供选择封锁元素使用class="selectBlocked"和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的菜单DIV使用处理菜单的选择，如果选择的菜单做什么与类=“selectBlocked”

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

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

来源

2014-05-21 12:33:35

如何暂时阻止可选元素

回答

相关问题