Question

我的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，则只有.boxes与班级.events一起出现以及 <a>...</a>元素.events-button类[和它们现在应该是可点击的。]

The Jsfiddle is here.

Answer 1

working demo

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

Answer 2

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

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

单击主链接时会添加

$(".boxes a").hide();，隐藏div中的所有锚标记。

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

Answer 3

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

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

3 个答案: