0

我有一个小应用程序，它禁用了需要升级才能启用的选项。当用户单击设置选项时，会显示一个 div，为他们提供升级说明。它在 Firefox 和 Chrome（尚未测试 Opera 或 Safari）中运行良好，但在 IE（任何版本）中不起作用。

在我所做的测试中，似乎 javascript 可以工作，但是如果您直接单击输入元素，则脚本不会运行。如果您单击元素外部（在本例中为单选按钮），则它可以工作。具有 hidden-input 类的 div 应该显示在顶部，但它似乎显示在它周围。我对 z-index 所做的一切似乎都不起作用，包括来自http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/的修复我猜其他人已经遇到过这个问题，但我不确定如何修复它。以下是供参考的html和javascript。

<div style="display:inline-block; position:relative;">
    <input type="radio" class="radio" id="wcmenucart[cart_icon][1]" name="wcmenucart[cart_icon]" value="1" disabled="" />
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;" class="hidden-input-icon">
    </div>
</div>
<span style="display:none;" class="pro-icon"><i> Available in the <a href="#">Pro Version</a></i></span>

Javascript - 似乎工作正常，但以防万一......

<script type="text/javascript">
    jQuery('.hidden-input-icon').click(function() {
        jQuery('.pro-icon').show('slow');
    });
</script>

CSS：

.hidden -input-icon或.pro-icon都没有 css 样式。.pro-icon div 包含并且style="display:none;".hidden -input-icon div 包含style="position:absolute; left:0; right:0; top:0; bottom:0;"

编辑：

我的代码在这里有一个小提琴。希望这将有助于阐明情况。

4

1 回答 1

1

我不相信你在z-index这里有问题。我相信您在通过禁用元素传播事件时遇到问题。FF 和 Chrome 显然会将click事件沿链传播到下一个元素，但 IE 不会。 这篇 SO 帖子处理了类似的问题，但使用了 FF。他们的解决方案在 IE 中也失败了，但值得查看该帖子以查看更多详细信息。

这是一个至少适用于 Chrome 和 IE 的解决方案。这是您更新的小提琴以使用此解决方案。

代码与上面的解决方案非常相似，我只更改了第 17 行的“父”元素和第 39 行的实际点击功能。我还删除了原始的点击处理程序。我在小提琴中添加了另一个单选按钮，以便您可以看到我的解决方案不应干扰现有的“非禁用”元素。

于 2013-03-05T15:28:40.737 回答