0

こんにちは、div がクラスを持っていないかどうかをチェックする if ステートメントを書きたいと思っています。スクリプトを持っていない場合は、toggleClass を使用して追加する必要があります (私は jquery ui を使用しています)。 「最小」クラスを持たない（.apla）をポイントし、2番目（this）はクリックされた（.arrow）で（.apla）をポイントする必要があります

これのポイントは、(.apla) が開いているかどうかを確認し、(.apla) が開いている場合、スクリプトは toggleClass (アニメーション付き) を使用してそれを閉じる必要があり、このスクリプトを開いた後、同じく toggleClass を使用してクリックされた (.apla) を開く必要があります。あなたは私を助けてください

フィドル - http://jsfiddle.net/eNqew/

JS

$('.arrow').click(function(){
    if (!$(".apla").hasClass("min")) {
    $(this).toggleClass("min", "slow");
    } else {
    $(this).parent().parent().toggleClass("min", "slow");
    }
});

UPDATE JS はほぼ動作します

$('.arrow').click(function(){
        if (!$("#apla01").hasClass("min")) {
            $("#apla01").toggleClass("min", "slow");
        }
        if (!$("#apla02").hasClass("min")) {
            $("#apla02").toggleClass("min", "slow");
        }
        if (!$("#apla03").hasClass("min")) {
            $("#apla03").toggleClass("min", "slow");
        }
        else {
            $(this).parent().parent().toggleClass("min", "slow");
        }
    });

HTML

<div id="apla01" class="apla min">
    <div class="apla-wraper">
        <div class="arrow"></div>
    </div>      
</div>
<div id="apla02" class="apla min">
    <div class="apla-wraper">
        <div class="arrow"></div>
    </div>      
</div>
<div id="apla03" class="apla min">
    <div class="apla-wraper">
        <div class="arrow"></div>
    </div>      
</div>

CSS

#apla01.apla.min {
    z-index: 5;
    left: -800px;
}
#apla02.apla.min {
    z-index: 4;
    left: -760px;
}
#apla03.apla.min  {
    z-index: 3;
    left: -720px;
}
.apla {
    width: 838px;
    height: 634px;
    position: absolute;
    top: 20px;
    left: 0;
    background: url(../img/bgApla.png) no-repeat -5px center;
}
.apla.min {
}
.apla-wraper {
    position: relative;
    width: 100%;
    height: 100%;
}
.arrow {
    width: 28px;
    height: 28px;
    background: url(../img/arrow.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    right: -10px;
    margin-top: -14px;
    cursor: pointer;
}
.apla.min  .arrow{
    background: url(../img/arrow.png) no-repeat -28px 0;
}
4

3 に答える 3

1

これを試して ：

$('.arrow').click(function(){
    var $currentApla = $(this).parent().parent()
    $('.apla:not(.min)').not('#'+$currentApla.attr('id')).toggleClass("min", "slow");
    $currentApla.toggleClass("min", "slow")
});

お役に立てれば ：）

于 2012-07-25T13:39:01.267 に答える
1

これは、親の .alpa クラスをチェックします。

    $('.arrow').click(function(){
         $('.apla').not('.min').not($(this)).toggleClass("min", "slow");
         $(this).closest(".apla").toggleClass("min", "slow");
    });
于 2012-07-25T13:43:27.827 に答える
0

.is()true または false を返すので、後になります

 $('.arrow').click(function(){
     if (!$(".apla").is(".min")) {
     $(this).toggleClass("min", "slow");
     } else {
     $(this).parent().parent().toggleClass("min", "slow");
     }
 });
于 2012-07-25T13:05:26.413 に答える