2014-09-05 3 views
0

제 응용 프로그램의 기능에 jQuery sideToggle 함수를 사용하려고했습니다.jQuery sideToggle이 제대로 작동하지 않습니다.

다음 코드는 제가 가지고있는 코드입니다.

HTML :

<select class="selectme"> 
    <option value=0>Select an Option</option> 
    <option value=1>Select1</option> 
    <option value=2>Select2</option> 
</select> 
<div class="clickme">Hello 
    <div class="iamhidden">Hello once again</div> 
</div> 

JS :

$(".selectme").on("change",function(){ 
    if($(".selectme").val() == 1){ 
     click(); 
    } 
    else if($(".selectme").val() == 2){ 
     click2(); 
    } 
}); 

function click(){ 
    $(".clickme").on("click",function(){ 
     $(".iamhidden").slideToggle("slow"); 
    }); 
} 
function click2(){ 
    $(".clickme").on("click",function(){ 
     $(".iamhidden").slideToggle("slow"); 
    }); 
} 

CSS : 나는 하나의 옵션을 선택하고 나중에 다른 옵션을 선택하고 사업부를 클릭 한 후

.clickme{ 
    height: auto; 
} 
.iamhidden{ 
    display: none; 
} 

" clickme "이면 sideToggle div가 잠시 동안 자신을 표시 한 다음 숨 깁니다.

저는 jQuery를 처음 사용하고 제 코드에 무엇이 잘못된 것인지 잘 모릅니다. 코드에서 두 번 호출되는 onClick 이벤트가 문제를 일으켰을 수도 있지만 div 등의 이름을 바꾸는 많은 대안을 시도한 후에도이 문제를 해결할 수는 없습니다.

JSFIDDLE 링크 : http://jsfiddle.net/63dnapvd/

는 사람이 해결에 좀 도와 주시겠습니까. 어떤 도움이라도 대단히 감사하겠습니다.

감사합니다.

+0

선택을 변경할 때마다 다른 이벤트를 추가하십시오! 클릭 이벤트를 대체하지 않고 실행하려는 이벤트 목록에 추가합니다. – epascarello

답변

0

당신은 함수와 호출 및 처리기에 대해 혼란스러워합니다. 핸들러를 사용하는 경우 이벤트가 발생할 때마다 활성화됩니다. 함수 자체를 호출하는 데 또 다른 클릭이 필요할 것이므로 함수 내부를 감쌀 필요가 없습니다.

사용자가 두 번 기능을 표시 했으므로 두 번 활성화하고 두 번 토글하여 다시 돌아 가게했습니다.

여기에 고정 - http://jsfiddle.net/63dnapvd/2/

$(".clickme").on("click",function(){ 
    $(".iamhidden").slideToggle("slow"); 
}); 

편집 - 당신이 다음 다시 올라갈 지연을 원하는 경우, 다음 지연을 추가하고 다시 호출합니다. 다음과 같이 http://jsfiddle.net/63dnapvd/3/

$(".clickme").on("click",function(){ 
    $(".iamhidden").slideToggle("slow").delay(200).slideToggle("slow"); 
}); 

편집 2 :

의 변화는 다음이 시도 후 사업부를 클릭 할 때 당신이 그것을 할 필요가있는 경우 : 해당 요소를 표시하려면

$(".selectme").on("change",function(){ 

     /*Do whatever you needed to do on change here */ 

     $(".clickme").on("click",function(){ 
     $(".iamhidden").slideToggle("slow").delay(200).slideToggle("slow"); 
     }); 
    }); 

을 모든 변경 후에 다음을 시도하십시오.

$(".selectme").on("change",function(){ 
     $(".iamhidden").slideToggle("slow").delay(200).slideToggle("slow"); 
    }); 
+0

내 응용 프로그램의 기능을 사용하려면 select 옵션에 변경 사항이있을 때 slideToggle 함수를 넣어야합니다. 옵션 변경시 divs 컨텐츠를로드하고 있는데이 함수가 일반 함수가 아닌 내부에 있어야합니다. –

+0

그러면 클릭 처리기가 필요하지 않습니까? 그것의 변화? – LiamHT

+0

@AmitNandanPeriyapatna - 업데이트 된 답변보기 – LiamHT

관련 문제