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クリック可能であってはなりません。次に、 をクリックすると、 with class:.eventsのみがclassを持つ要素とともに表示されます[そして、それらは今すぐクリックできるはずです.].boxes.events <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 に答える