Question

嗨，我想写if语句，检查div是否没有hasClass，如果没有它脚本应该使用toggleClass添加它（我使用jquery ui），我写的脚本上面的whitch工作得很好但是第一个（这个）应该指向（.apla）没有“min”类，第二个（this）指向（.apla）点击（.arrow）

这一点是检查是否有任何（.apla）是打开的，如果有任何（.apla）是打开脚本应该使用toggleClass（带动画）关闭它，并且此脚本应该打开后点击（.apla）也使用toggleClass，你可以帮帮我吗

小提琴 - 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;
}

Answer 1

试试这个：

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

希望这会有所帮助：）

Answer 2

这是父母.alpa班：

    $('.arrow').click(function(){
         $('.apla').not('.min').not($(this)).toggleClass("min", "slow");
         $(this).closest(".apla").toggleClass("min", "slow");
    });

Answer 3

您将在.is()之后返回true或false

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

if语句检查div hasClass

3 个答案: