jQuery 一键显示/隐藏div元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13145653/
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
Show/Hide div element with one button
提问by Wil Prim
I have recently been diving into jquery and loved how you could show/hide elements when an event is triggered. I tried adding a simple feature to my test website that will show Login Form when the login button is clicked and then hide the form if the button is clicked again, however; the jquery function I am using only works once (when I click the button and display the form) but after the form is displayed if I try to click the button again nothing happens.
我最近一直在深入研究 jquery，并且喜欢在触发事件时如何显示/隐藏元素。我尝试向我的测试网站添加一个简单的功能，该功能将在单击登录按钮时显示登录表单，然后在再次单击该按钮时隐藏该表单；我使用的 jquery 函数只工作一次（当我单击按钮并显示表单时），但是在显示表单后，如果我再次尝试单击该按钮，则没有任何反应。
Jquery Code:
查询代码：
function displayLoginBox(){
if ($("#login_Box_Div:hidden")){
$("#login_Box_Div").show();
$("#buttonLogin").css('color', '#FF0');
}
else if($("#login_Box_Div:visible")){
$("#login_Box_Div").hide();
$("#buttonLogin").css('color','white');
}
}
HTML button code:
HTML按钮代码：
<h3> <a href= "#">Pictio </a> <button id = "buttonLogin" onclick = "displayLoginBox()">LogIn</button></h3>
HTML div code:
HTML div 代码：
<div id = "login_Box_Div">
<form name = "myform" >
<input type = "text" name = "username" placeholder = "Username" />
<input type = "password" name = "password" placeholder= "Password" />
<input type = "submit" id = "submitLogin" />
</form>
</div>
I have a feeling that the jquery script only runs once and then is finished, but I could be wrong.
我有一种感觉，jquery 脚本只运行一次然后就完成了，但我可能是错的。
回答by Sushanth --
Try using .toggle()
尝试使用 .toggle()
$('#buttonLogin').on('click', function(e){
$("#login_Box_Div").toggle();
$(this).toggleClass('class1')
});?
.class1
{
color: orange;
}?
You can use toggleClass()to toggle the class for the button
您可以使用toggleClass()切换按钮的类
回答by Roko C. Buljan
回答by The Alpha
You may try this
你可以试试这个
$('#buttonLogin').on('click', function(e){
$("#login_Box_Div").toggle();
var color=$("#login_Box_Div").is(':hidden') ? '#FF0' : 'white';
$("#buttonLogin").css('color', color);
});
例子。
Update:
更新：
Or using togglrClassyou may try this
或者使用togglrClass你可以试试这个
$('#buttonLogin').on('click', function(e){
$("#login_Box_Div").toggle();
$("#buttonLogin").toggleClass('whiteColor yelolowCollor');
});
例子。
回答by Fernando Javier Santamarina Ca
Use $('login_Box_Div').is(':hidden')and $('login_Box_Div').is(':visible')
使用$('login_Box_Div').is(':hidden')和$('login_Box_Div').is(':visible')
You also shouldn't use inline javascript. Here is a jsfiddle of it working http://jsfiddle.net/MrsW8/
您也不应该使用内联 javascript。这是它工作的 jsfiddle http://jsfiddle.net/MrsW8/
回答by Anish Vyas
You can use this code if you like, it helped me achieve the same.
如果您愿意，可以使用此代码，它帮助我实现了相同的目标。
$("button").click(function(){
$("div").toggle(function(e) {
if ($(this).is(":visible")) {
$("div").show();
$("button").css('color', 'red');
}
else {
$("div").hide();
$("button").css('color','white');
};
});
});
I am just using a single div and a single button with no id. Hope it helps your cause.
我只是使用一个 div 和一个没有 id 的按钮。希望它对您的事业有所帮助。
回答by Matheus Azevedo
JS
JS
function displayLoginBox(elem){
$("#login_Box_Div").toggle();
$(elem).toggleClass('login_clicked');
}
CSS
CSS
#buttonLogin{color: #fff;}
.login_clicked{color: #FF0 !important;}
HTML
HTML
<h3> <a href= "#">Pictio </a> <button id = "buttonLogin" onclick = "displayLoginBox(this)">LogIn</button></h3>
This approach also changes the login button color.
这种方法还会更改登录按钮的颜色。
回答by SpYk3HH
回答by Blazemonger
The :hiddenand :visibleselectors are filters, not Boolean methods.
该:hidden和:visible选择器是过滤器，而不是布尔方法。
What that means is: when you're testing
这意味着：当您进行测试时
if ($("#login_Box_Div:hidden")){
...what you get from $("#login_Box_Div:hidden")is a jQuery object -- which ALWAYS exists, and will ALWAYS return true, even if there's nothing in it.
...你得到的$("#login_Box_Div:hidden")是一个 jQuery 对象——它总是存在，并且总是返回 true，即使它里面什么都没有。
What you need to do is test the .lengthof that jQuery object. If it's zero, the jQuery object is empty:
您需要做的是测试该.lengthjQuery 对象的 。如果为零，则 jQuery 对象为空：
if ($("#login_Box_Div:hidden").length){ // zero is false, greater than zero is true
http://jsfiddle.net/mblase75/ThwFs/
http://jsfiddle.net/mblase75/ThwFs/
Alternatively, use the .is(selector)method, which DOES return a Boolean (true/false) value:
或者，使用.is(selector)DOES 返回布尔值（真/假）的方法：
if ($("#login_Box_Div").is(":hidden")){
http://jsfiddle.net/mblase75/ThwFs/2/
http://jsfiddle.net/mblase75/ThwFs/2/
While there are many ways to streamline your code, this is the answer to the actual problem you were having.
虽然有很多方法可以简化您的代码，但这是您遇到的实际问题的答案。
