1

別の Web サイトから Jquery コードをコピーしましたが、「リンク 1」は正常に機能しています。それを押すと、ポップアップ div が表示され、div の外側をクリックすると消えます (これで問題ありません)。しかし、「Link Two and Three popup divs」は正しく表示/非表示になりません。コードを強化していただけますか？以下のリンクをチェックしてください（私がこれまでに行ったこと）

http://jsfiddle.net/awaises/SNCtu/

また、「リンク 2」または「リンク 3」を押しても、一度に 1 つの div しか表示されないことを確認してください。</p>

本当にありがとうございました！

4

4 に答える 4

1

このコードを試してください

$(function() {
    $('#hidden1').hide().click(function(e) {
        e.stopPropagation();
    });
    $("a[class^='cart-buttom']").click(function(e) {
        var $cls = $(this).data('class');
        $("[id^='hidden']").not('#' + $cls).fadeOut();
        $('#' + $cls).animate({
            opacity: "toggle"
        });
        $("#shopping-cart").animate({
            "height": "toggle"
        }, {
            duration: 550
        });
        e.stopPropagation();
    });

    $(document).click(function() {
        $('#hidden1').fadeOut();
        $('#hidden2').fadeOut();
        $('#hidden3').fadeOut();
    });
});

対応する div id を格納するアンカーにデータ属性を追加しました

デモをチェック

于 2012-10-17T21:41:35.453 に答える
1

このもっと短いデモ http://jsfiddle.net/vERmV/を試してください

それが原因に適合することを願っています:)

コード

$(function() {
    $('#hidden1,#hidden2,#hidden3').hide().click(function(e) {
        e.stopPropagation();
    });
    $(".cart-buttom1,.cart-buttom2,.cart-buttom3").click(function(e) {

        var id = $(this).attr('class').replace(/cart-buttom/, '');

        $('.popup').hide()
        $('#hidden' + id).animate({
            opacity: "toggle"
        });

        e.stopPropagation();
    });

    $(document).click(function() {
        $('#hidden1,#hidden2,#hidden3').fadeOut();
    });
});​
于 2012-10-17T21:45:04.760 に答える
1

これは、探しているもののより簡単なデモです。

デモ: http://jsfiddle.net/5NEu3/273

http://jsfiddle.net/5NEu3/276/

<div id="nav">
    <a href="#content1">Show content 1</a>
    <a href="#content2">Show content 2</a>
    <a href="#content3">Show content 3</a>
</div>

<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>

//In Document.Ready
$("#nav a").click(function(e){
    e.preventDefault();
    $(".toggle").fadeOut();
    var toShow = $(this).attr('href');
    $(toShow).fadeIn();
});
于 2012-10-17T21:47:17.827 に答える
0

-> $("a.cart-buttom").click を使用してクリックイベントをクラス cart-buttom のタグにバインドすると、指定したイベント (説明したように表示/非表示) のみがクラスカートにのみ与えられます。 -buttom ですが、cart-buttom2 または cart-buttom3 ではありません。

したがって、この説明から、接尾辞として任意の文字を持つ html のクラスの識別子は、まったく異なるクラスになることが推測できます。それらにもクリック イベントをバインドするために、cart-buttom2 クラスと cart-buttom3 クラスに別々のクリック イベントを定義できます。もちろん、そのようなことを行うためのより賢明な方法があります。

于 2012-10-17T21:31:47.227 に答える