當不透明度為 0 時隱藏 div 內的可點擊鏈接

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類是.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>

我用於更改opacity javascript代碼。

    <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 ，只有.boxes用類： .events應該出現非常久遠<a>...</a>有元素.events-button類[和他們現在應該可以點擊]

Jsfiddle 在這里。

Answer 1

工作演示

$('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()