1

我的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>

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

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

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

Jsfiddle 在这里。

4

3 回答 3

1

工作演示

$('a[class="button"]').click(function(e){ // <--- don't miss this e
    if ($(this).css('opacity')==0) e.preventDefault();
});
于 2013-01-05T19:23:53.623 回答
1

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

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

$(".boxes a").hide();单击主页链接时添加，隐藏 div 中的所有锚标记。

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

于 2013-01-06T07:45:45.833 回答
0

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

于 2013-01-05T19:27:24.990 回答