2013-05-29 3 views
1
를 교환하지 않는

안녕하세요 그래서 내가 다음과 같습니다jQuery를 토글, 가까운 링크는 토글 상태

jQuery('#settings').toggle(function() { 
    jQuery('#event_time_interval_form_part').fadeIn(); 
}, function() { 
    jQuery('#event_time_interval_form_part').fadeOut(); 
}); 
jQuery('.cancel').click(function(e){ 
    e.preventDefault(); 
    jQuery(this).parents('#event_time_interval_form_part').fadeOut(); 
}); 

<div class="auction-settings"> 
    <span id="settings"><span class="icon icon-cogs"></span> settings</span> 
    <div id="event_time_interval_form_part" style="display:none;" > 
     <span class="cancel">cancel</span> 
    </div> 
</div> 

그러나 내가 할 때 주위의 전환을 전환하는 방법을 작동하지 않을 수있는 HTML 닫기 링크를 클릭하면 토글이 설정 (열기 및 닫기)을 클릭 할 때 작동하지만 열린 상태에서 토글 영역 내에서 취소를 클릭하면 어느 것이 좋을지가 닫히지 만 설정을 다시 클릭하면 클릭해야합니다 두 번 보여줍니다.

아이디어가 있으십니까?

+0

가 귀하의'.actions 당신의 위의 코드에서 당신은'작성 content' 블록 한 곳 .cancel' 버튼? – crush

+0

jQuery 버전이 사용 되었습니까? –

+0

방금 ​​업데이트 한 내용이 있습니다. – 1Line

답변

0

toggle 이벤트 방법은 더 이상 사용되지 않습니다. 대신 clickfadeToggle 방법을 사용할 수 있습니다 span 클릭 이벤트가 어떤 기본 동작이없는

$('#settings, .cancel').click(function(e) { 
    $('#event_time_interval_form_part').fadeToggle(); 
}); 

http://jsfiddle.net/RmFfz/

하는 것으로를 preventDefault() 방법을 사용할 필요가 없습니다.

+0

아하는 잘 했어! 솔루션 주셔서 감사합니다, 아주 간단! 다시 한 번 감사드립니다. – 1Line

+0

@ 1Line 매우 환영합니다. – undefined

0

대신 .toggle 사용 .clickhttp://jsfiddle.net/AUz97/3/

jQuery('#settings').click(function() { 
    jQuery('#event_time_interval_form_part').toggle(); 

}); 
jQuery('.cancel').click(function(e){ 
    e.preventDefault(); 
    jQuery(this).parents('#event_time_interval_form_part').fadeOut() 
}); 
+0

이 솔루션을 시도했지만 설정을 클릭해도 아무 것도하지 않습니다 .....? – 1Line

+0

jsfiddle ..... –

0

가 바이올린을 참조하십시오 http://jsfiddle.net/AUz97/

그러나

jQuery('.actions .cancel').click(function(e){ 
    e.preventDefault(); 
    jQuery(this).parents('#event_time_interval_form_part').fadeOut(); 
}); 

어디 u는 클릭 할 수있는 요소에 추가 .cancel .action이 클래스는 ?

+0

로 답변을 업데이트했습니다. jsfiddle, http://jsfiddle.net/AUz97/1/을 업데이트합니다. 설정을 클릭 한 다음 설정을 다시 취소하면 설정을 두 번 클릭해야합니다. 다시 나타납니다. – 1Line

+0

예프. 보통, 토글은'display :'의 현재 상태를 고려해야하지만 분명히 그렇지 않습니다. 비록 jQuery 문제는 야생에서 거의 볼 수 없지만, 나는 이것을 jQuery 문제로 간주하는 경향이있다. 이것은 설정/변경이 실제로 어디로 가는지보기 위해 DOM 레벨에서 디버깅되어야합니다. –

+0

사실, "취소"를 클릭하여 닫은 후 상태는 초기화 후와 동일하지만 설정 후 처음 클릭하면 아무 것도 변경되지 않습니다. 두 번 클릭하면 예상대로 작동합니다. 단서없는 ... –

0

당신이 jQuery를 < 1.9을 사용하는 경우 다음

jQuery('#settings').toggle(function() { 
    jQuery('#event_time_interval_form_part').fadeIn(); 
}, function() { 
    jQuery('#event_time_interval_form_part').fadeOut(); 
}); 
jQuery('.cancel').click(function(e){ 
    e.preventDefault(); 
    jQuery('#settings').click() 
}); 

데모 : Fiddle