if div hasClass 문을 검사하는 if 문

Question

안녕하세요. div가 hasClass가 아닌지 확인하는 if 문을 쓰고 싶습니다. 그리고 toggleClass를 사용하여 스크립트를 추가해야합니다. (jquery UI를 사용하고 있습니다.) 위의 스크립트가 작동합니다. 거의 괜찮지 만 첫 번째 (this)는 "min"클래스가 아니고 두 번째 (this)가 클릭 (.arrow)으로 가리켜 야하는 (.apla)을 가리켜 야합니다

요점은 확인하는 것입니다. (.apla)가 열려 있고 어떤 스크립트 (.apla)가 열려 있으면 스크립트가 toggleClass (애니메이션 포함)를 사용하여 닫아야하고이 스크립트가 toggleClass를 사용하여 clicked (.apla)를 열어야한다면 pls를 도울 수 있습니다.

바이올린 - 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> 

#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

당신은 01 후 수 있습니다 CSS가 반환으로 참 또는 거짓

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

Answer 3

이 부모 .alpa 클래스 첵 :) 도움 :

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