jQuery 切换状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/244392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Toggle State
提问by neezer
Here's the quick and skinny of my issue:
这是我的问题的快速而简单的问题：
$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });
Inside function Aa form is displayed. If the user successfully completes the form, the form is hidden again (returning to it's original state).
function A显示在表格内。如果用户成功完成表单，表单将再次隐藏（返回到其原始状态）。
Inside function Bthe same form is hidden.
在function B同一个窗体里面是隐藏的。
The theory behind this is that the user can choose to display the form and fill it out, or they can click again and have the form go back into hiding.
这背后的理论是，用户可以选择显示表单并填写它，或者他们可以再次单击并让表单重新隐藏。
Now my question is this: currently, if the user fills out the form successfully--and it goes into hiding--the user would have to click on the link twicebefore returning to the toggle state that displays the form.
现在我的问题是：目前，如果用户成功填写表单——并且它进入隐藏状态——用户必须在返回到显示表单的切换状态之前单击链接两次。
Is there anyway to programmatically reset the toggle switch to its initial state?
无论如何以编程方式将拨动开关重置为其初始状态？
回答by Nicky Vandevoorde
You can check the state of the toggle in jQuery by using .is(":hidden"). So in basic code what I used:
您可以使用.is(":hidden"). 所以在我使用的基本代码中：
$("#div_clicked").click(function() {
if ($("#toggle_div").is(":hidden")) {
// do this
} else {
// do that
}
}); # add missing closing
回答by foxy
jQuery has two .toggle()methods:
jQuery 有两种.toggle()方法：
Toggles each of the set of matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.
切换每个匹配元素集。如果显示它们，则切换使它们隐藏。如果它们被隐藏，切换使它们显示。
Toggle between two function calls every other click.
每隔一次点击在两个函数调用之间切换。
In this case you want the first one. Something like this should do the trick:
在这种情况下，您需要第一个。像这样的事情应该可以解决问题：
$("a").click(function() {
$("#theForm").toggle();
});
回答by Michal Zuber
Here's what I used:
这是我使用的：
$(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');
}
});
});
回答by xiatica
Went with this one to avoid the additional hide/show class. I think this is more flexible than foxy's solution as you can add more functions within but don't quote me on that i'm a noob
使用这个是为了避免额外的隐藏/显示类。我认为这比 Foxy 的解决方案更灵活，因为您可以在其中添加更多功能，但不要引用我说我是菜鸟
$("#clickie").click(function(){
if ( $("#mydiv").css("display") == "none" ){
$("#mydiv").show();
} else {
$("#mydiv").hide();
}
回答by neezer
Ahh, it's the simple things in life...
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
I was using the latter definition of toggle(even,odd);, but I had forgot to include in my original description of the problem that my second toggle function was not only hiding the form, but destroying it as well.
我正在使用 的后一个定义toggle(even,odd);，但我忘记在我对问题的原始描述中包含我的第二个切换功能不仅隐藏表单，而且还破坏了它。
function A: Ajax load the form into an appended div. Hide and destroy the div on a successful form post.
function A: Ajax 将表单加载到附加的 div 中。在成功的表单帖子上隐藏并销毁 div。
function B: Destroy the div.
function B: 销毁div。
You both reminded me that toggle();only deals with the CSS property, and as such it is not well-suited to this task. But then I realized that I was unnecessarily re-loading the form on each "odd" state by destroying it when I was done, so I eventually came back to this:
你们都提醒我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();
}
});
...which does what I want it to do. Thanks for setting me straight about toggle();!
...它做我想要它做的事情。谢谢你让我直截了当toggle();！
回答by Vishal Patel
$("#div_clicked").click(function() {
if ($("#toggle_div").is(":visible")) {
// do this
} else {
// do that
}
Replace hidden with visible
用可见替换隐藏
