Question

你好，所以我有以下内容：

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();
});

和HTML

<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>

但是，当您单击关闭链接时，我无法确定如何切换切换，当您单击设置（打开和关闭）时切换工作时间，但是当它打开并且您在切换区域内单击取消时，它关闭哪个好，但如果你再次点击设置，你必须在它显示之前点击它两次。

有什么想法吗？

Answer 1

不推荐使用

toggle事件方法。您可以改为使用click和fadeToggle方法：

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

http://jsfiddle.net/RmFfz/

请注意span点击事件没有任何默认操作，无需使用preventDefault()方法。

Answer 2

而不是.toggle使用.click，请参阅http://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()
});

Answer 3

摆弄：http://jsfiddle.net/AUz97/

但是

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

这些类.action .cancel在哪里添加到你可以点击的元素？

Answer 4

如果你正在使用jQuery＆lt; 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

jQuery切换，关闭链接不是交换切换状态

4 个答案: