2008-10-28 113 views
16

這裏是快速瘦我的問題:內部function A顯示jQuery的切換狀態

$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });

的形式。如果用戶成功完成表單,表單會再次隱藏(返回到原始狀態)。

裏面function B隱藏相同的形式。

背後的理論是,用戶可以選擇顯示錶單並填寫表單,或者他們可以再次單擊並讓表單回到隱藏狀態。

現在我的問題是這樣的:目前,如果用戶成功地填寫表格 - 它進入隱藏 - 用戶將不得不返回切換狀態之前點擊兩次那顯示錶單。

是否有編程方式重置切換開關到其初始狀態?

+0

這裏是[如何創建jQuery插件,以單選按鈕轉換成切換按鈕(HTTP教程:// sgeek。 org/jquery-toggle-button-plugin-for-sliding-toggle-switches-sswitch /)和[在這裏你可以看到demo](http://www.demos.sgeek.org/sswitch-jquery-plugin-demo/ ) – 2017-02-13 05:17:38

回答

18

jQuery的具有兩個.toggle()方法:

每個匹配 元件的

.toggle()

切換。如果顯示它們,則撥動 使其隱藏。如果他們隱藏, 切換使他們顯示。

.toggle(even, odd)

切換之間兩個函數調用所有其他的點擊。

在這種情況下,你想要第一個。這樣的事情應該做的伎倆:

$("a").click(function() { 
    $("#theForm").toggle(); 
}); 
+11

jQuery 1.9中刪除了偶數/奇數語法。 http://jquery.com/upgrade-guide/1.9/ – 2013-01-18 18:33:15

2

啊,這是生活中簡單的事情......

我用的toggle(even,odd);後者的定義,但我已經忘了我最初的描述,包括問題是我的第二個切換函數不僅隱藏了表單,而且還破壞了它。

function A:Ajax將表單加載到附加的div中。在成功的表單文章中隱藏並銷燬div。

function B:銷燬div。

你們都提醒我toggle();只處理CSS屬性,因此它不適合執行此任務。但後來我意識到,我是不必要通過摧毀它,當我做重新裝上每一個「奇」狀態的形式,所以我最終回到了這一點:

$("link").click(function() { 
    if ($(this).siblings(".form-div").length == 0) { 
     // form is not loaded; load and show the form; hide when done 
    } 
    else { 
     $(this).siblings(".form-div").toggle(); 
    } 
});

...這我想要做什麼它要做的。感謝您爲我設定了toggle();

5

下面是我用什麼:

$(document).ready(function() { 
    $('#listing_position').click(function() { 

    var div_form = $('#listing_position_input'); 
     if (div_form.hasClass('hide')) { 
      div_form.removeClass('hide'); 
     } else { 
      div_form.addClass('hide'); 
     } 
    }); 
}); 
+0

這是我唯一可靠的工作。 – 2009-11-22 18:46:29

+0

如果你只是想切換一個類,就有一個.toggleClass()方法 – 2012-04-09 07:59:29

2

去與這一個,以避免額外的隱藏/顯示類。 我覺得這比狡猾的解決方案更加靈活,因爲你可以在添加更多的功能,但不要引用我,我是一個菜鳥

$("#clickie").click(function(){ 
    if ($("#mydiv").css("display") == "none"){ 
    $("#mydiv").show(); 
     } else { 
     $("#mydiv").hide(); 
} 
35

您可以通過使用.is(":hidden")檢查jQuery的切換狀態。因此,在基本的代碼是我用:

$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":hidden")) { 
    // do this 
    } else { 
    // do that 
} 
}); # add missing closing 
+2

這是正確的答案。 – 2014-05-12 15:49:54

-2
$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":visible")) { 
    // do this 
    } else { 
    // do that 
} 

替換隱藏可見