Question

我最近一直潜入jquery，并喜欢在触发事件时如何显示/隐藏元素。我尝试在我的测试网站上添加一个简单的功能，当点击登录按钮时会显示登录表单，然后如果再次点击按钮则隐藏表单;我使用的jquery函数只工作一次（当我单击按钮并显示表单时）但是在显示表单后如果我再次尝试单击该按钮则没有任何反应。

Jquery代码：

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按钮代码：

<h3> <a href= "#">Pictio  </a> <button id = "buttonLogin" onclick = "displayLoginBox()">LogIn</button></h3>

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>

我觉得jquery脚本只运行一次然后完成，但我可能错了。

Answer 1

尝试使用.toggle()

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $(this).toggleClass('class1')
});

.class1
{
     color: orange;
}

您可以使用toggleClass()来切换按钮的类

<强> Check FIDDLE

Answer 2

无需使用内联javascript。

的 LIVE DEMO

$('#buttonLogin').click(function(){ $('#login_Box_Div').toggle(); });

Answer 3

你可以试试这个

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    var color=$("#login_Box_Div").is(':hidden') ? '#FF0' : 'white';
    $("#buttonLogin").css('color', color);
});

Example

更新

或者使用togglrClass，您可以试试这个

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $("#buttonLogin").toggleClass('whiteColor yelolowCollor');
});

Example

Answer 4

尝试使用jQuery的toggle函数来完成此任务

Answer 5

JS

function displayLoginBox(elem){

 $("#login_Box_Div").toggle();
 $(elem).toggleClass('login_clicked');

}

CSS

#buttonLogin{color: #fff;}
.login_clicked{color: #FF0 !important;}

HTML

<h3> <a href= "#">Pictio  </a> <button id = "buttonLogin" onclick = "displayLoginBox(this)">LogIn</button></h3>

此方法还会更改登录按钮颜色。

Answer 6

Try this:

function displayLoginBox(){
    $("#login_Box_Div").toggle(function(e) {
        if ($(this).is(":visible")) {
            $("#login_Box_Div").show();
            $("#buttonLogin").css('color', '#FF0');
        }
        else {
            $("#login_Box_Div").hide(); 
            $("#buttonLogin").css('color','white');
        };
    });
}

Answer 7

:hidden和:visible选择器是过滤器，而不是布尔方法。

这意味着：当你在测试时

if ($("#login_Box_Div:hidden")){

...你从$("#login_Box_Div:hidden")获得的是一个jQuery对象 - 它总是存在，并且总是会返回true，即使它没有任何内容。

您需要做的是测试该jQuery对象的.length。如果它为零，则jQuery对象为空：

if ($("#login_Box_Div:hidden").length){ // zero is false, greater than zero is true

http://jsfiddle.net/mblase75/ThwFs/

或者，使用.is(selector)方法，该方法返回布尔值（true / false）：

if ($("#login_Box_Div").is(":hidden")){

http://jsfiddle.net/mblase75/ThwFs/2/

虽然有很多方法可以简化您的代码，但这是您遇到的实际问题的答案。

Answer 8

使用$('login_Box_Div').is(':hidden')和$('login_Box_Div').is(':visible')

您也不应该使用内联JavaScript。这是一个工作http://jsfiddle.net/MrsW8/

的jsfiddle

Answer 9

如果您愿意，可以使用此代码，它帮助我实现了相同的目标。

$("button").click(function(){
$("div").toggle(function(e) {
        if ($(this).is(":visible")) {
            $("div").show();
            $("button").css('color', 'red');
        }
        else {
            $("div").hide(); 
            $("button").css('color','white');
        };
    });
});

我只使用一个div和一个没有id的按钮。希望它有助于你的事业。

用一个按钮显示/隐藏div元素

9 个答案:

更新