不透明度为 0 时隐藏 div 内的可点击链接答案

【问题标题】：Hide clickable links inside div when opacity is 0不透明度为 0 时隐藏 div 内的可点击链接
【发布时间】：2013-01-06 17:09:51
【问题描述】：

我的HTML结构如下：

<div class="boxes workshops wrapl">
    <a href="#" id="showw1" class="workshops-button lfloat">Show it</a>
</div>

<div class="boxes exhibitions">
    <a href="#" id="showex1" class="exhibitions-button lfloat">Show it</a>
</div> 
<div class="boxes gallery">
    <a href="#" id="showex1" class="gallery-button lfloat">Show it</a>
</div>

.boxes 类是彼此相邻设置的正方形。大约有30 框。最初，所有框都设置为opacity:1，所有-button 类都设置为opacity:0。

但是，如果我将鼠标悬停在.boxes 内，链接也是可点击的。

我的.navi 菜单：

<div id="navi">
    <a href="#"><div id="t0"><span>Home</span></div></a>
    <a href="#"><span>Events</span></a>
    <a href="#"><span>Gallery</span></a>
    <a href="#"><span>Exhibitions</span></a>
</div>

我的javascript 代码用于更改opacity。

    <script type="text/javascript">
    var isHome = true;
        $(function () {

            $("#navi a").click(function() {
                c = $(this).text().toLowerCase();
                isHome = c=="home";
                if (isHome){
                    $('.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button').animate({opacity:0.0},500);
                    $(".boxes").animate({opacity: 1.0}, 500 );

                } else {
                    $('.' + c).animate({opacity: 1.0}, 500 );
                    $('.' + c + "-button").animate({opacity: 1.0}, 500 ).addClass('activehack');
                    $('.activehack').not('.' + c + "-button").animate({opacity: 0.0}, 500 );
                    $('.boxes').not('.' + c).animate({opacity: 0.3}, 500 );
                }
            });
        });
</script>

当-button 元素不可见时，如何删除它们的click 事件？

编辑 #1 我不必单击.-button 元素。

当我点击home 时，所有.boxes 都应该出现，但每个.boxes 中的<a>..</a> 元素一定不能点击。然后，如果我单击.events，则只有具有.events 类的.boxes 应该出现以及具有.events-button 类的<a>...</a> 元素[并且它们现在应该可以单击了。]

The Jsfiddle is here.

【问题讨论】：

你为什么使用不透明而不是隐藏/淡出？
@popnoodles：因为我想使用fadeIn 和fadeOut 效果。我知道fadeIn 和fadeOut 也是专用的Jquery 函数。不过，我只是在使用它。
fadeIn 和 fadeOut 在达到 0% 不透明度后隐藏元素，这样您就不会遇到这个问题。无论如何，我已经在使用不透明度的情况下给出了答案。
更新了我的答案 - 略有误读，请检查它是否有效。
@popnoodles：这行不通。

标签： javascript jquery html css click

【解决方案1】：

working demo

$('a[class="button"]').click(function(e){ // <--- don't miss this e
    if ($(this).css('opacity')==0) e.preventDefault();
});

【讨论】：

我认为你误解了这个问题。我不必单击.-button 元素。请查看我编辑的问题。
“当 -button 元素不可见时，如何删除它们的点击事件？” 使用我的代码，如果在它们不可见时单击它们，则不会发生任何事情。当它们再次可见时，单击即可。

【解决方案2】：

我知道您已经接受了一个答案，但事情只是阻止点击事件并不会停止默认行为 - 当您将鼠标悬停在锚点上时，“手”图标表示可以点击。确实，您应该显示/隐藏锚点，而不是覆盖单击它们时发生的情况，因为 它们首先不应该是可点击的。

这是一个jsfiddle，它实际上显示/隐藏了链接，使它们无法点击，这是一种“副作用”，但也是用户的预期行为。

$(".boxes a").hide(); 是在点击 home 链接时添加的，隐藏 div 中的所有锚标记。

这也用于单击任何其他导航项时，然后$('.' + c + ' a').show(); 用于显示相关链接。

【讨论】：

谢谢。我必须接受遵守 SO. 规则的答案（或最接近的答案）。：P
好吧，我确实发布了另一个类似的问题。人们很难理解它。

【解决方案3】：

取消绑定不必要的处理程序使用.unbind()

【讨论】：