0

嗨，我想编写 if 语句来检查 div 是否没有 hasClass，如果没有，脚本应该使用 toggleClass 添加它（我正在使用 jquery ui），我在上面写的脚本几乎可以正常工作，但第一个（这个）应该指向没有“min”类的（.apla），第二个（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;
}
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 回答