JavaScript/jQueryを使用してdivの表示を切り替える

Question

ボタンをクリックすると、オーバーレイ「ログイン画面」が表示されます。私のコードはまったく動いていません。ここではHTMLは次のとおりです。

$(document).ready(function() { 
 
    var isOpen = new Boolean(false); 
 

 
    if (isOpen == true) { 
 
    document.getElementById("login-float").style.display = "block"; 
 
    } else { 
 

 
    document.getElementById("login-float").style.display = "none"; 
 
    } 
 

 
    $("#login-button").click(function() { 
 
    isOpen != isOpen; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="topnav" id="myTopnav"> 
 

 
    <li><a href="#" id="login-button" style="background-color: #404040;">CLIENT AREA</a></li> 
 
    <!--deleted other menu items as they are not important to the issue--> 
 

 
</ul> 
 

 
<div id="login-float" style="display: none;"> 
 

 
    <form id="login-mini" action="login-check.php" method="post"> 
 

 
    <fieldset> 
 

 
     <center> 
 

 
     <h2>Client Login Area</h2> 
 

 
     </center> 
 

 
     <br> 
 

 
     <input class="text-input" type="text" name="username" id="username" placeholder="username"> 
 

 
     <br> 
 

 
     <input class="text-input" type="password" name="password" id="password" placeholder="password"> 
 

 
     <br> 
 

 
     <input class="submit" type="submit" value="Login"> 
 

 
     <br> 
 

 
     <center> 
 

 
     <a href="/contact.php">I can't access my account.</a> 
 

 
     </center> 
 

 

 

 

 
    </fieldset> 
 

 
    </form> 
 

 
</div>

私はJavaScriptとjQueryを使って経験の全体の多くを持っていないが、私は、前に/非表示のコンテンツを表示するスクリプトを作っているだけで1を加えていません可視性をトグルするので、そこに問題があると仮定しています。私は大いに助けに感謝します！条件は、そこに住む必要がありますので

Answer 1

は .clickコールバックの内側に

$(document).ready(function() { 
     var isOpen = false;   
     $("#login-button").click(function() { 
     isOpen = !isOpen; 
     if (isOpen) { 
      document.getElementById("login-float").style.display = "block"; 
     } else { 
      document.getElementById("login-float").style.display = "none"; 
     } 
     }); 
    }); 

コードexcutesにコードを変更し

。あなたはコードをもっときれいにすることができますが、これはうまくいくはずです。

Answer 2

コードに多少の誤差があるので気をつけてください：

isOpen != isOpen; 

を使用すると、値を代入していない、それだけの状態です。あなたのチェックはこのページのみをロードした後、一度だけ評価されます

$(document).ready(function() { 

の内側に作られているので、また

isOpen = !isOpen; 

に

：あなたはこれをしたいかもしれません。これは、あなたがjQueryをせずに欲しいものを達成するための方法です

function checkOpen(){ 
    if (isOpen == true) { 
     ... 
    }else{ 
     ... 
    } 

、[OK]をクリックします

$("#login-button").click(function() { 
    isOpen != isOpen; 
    checkOpen(); 
}); 

Answer 3

にそれを呼び出す：あなたは、関数の内部であなたのチェックを入れ、その後、必要なときにそれを呼び出す、例えばしなければなりません！

var isOpen = false; 
 

 
function toggleLogin() { 
 
    if (isOpen === true) { 
 
    document.getElementById("login-float").style.display = "block"; 
 
    } else { 
 
    document.getElementById("login-float").style.display = "none"; 
 
    } 
 
} 
 

 
document.getElementById("login-button").addEventListener('click', function() { 
 
    isOpen = !isOpen; 
 
    toggleLogin(); 
 
});

<ul class="topnav" id="myTopnav"> 
 

 
    <li><a href="#" id="login-button" style="background-color: #404040;">CLIENT AREA</a></li> 
 
    <!--deleted other menu items as they are not important to the issue--> 
 

 
</ul> 
 

 
<div id="login-float" style="display: none;"> 
 

 
    <form id="login-mini" action="login-check.php" method="post"> 
 

 
    <fieldset> 
 

 
     <center> 
 

 
     <h2>Client Login Area</h2> 
 

 
     </center> 
 

 
     <br> 
 

 
     <input class="text-input" type="text" name="username" id="username" placeholder="username"> 
 

 
     <br> 
 

 
     <input class="text-input" type="password" name="password" id="password" placeholder="password"> 
 

 
     <br> 
 

 
     <input class="submit" type="submit" value="Login"> 
 

 
     <br> 
 

 
     <center> 
 

 
     <a href="/contact.php">I can't access my account.</a> 
 

 
     </center> 
 

 

 

 

 
    </fieldset> 
 

 
    </form> 
 

 
</div>

Answer 4

あなたはそれを変更し、toggle()

$(document).ready(function() { 
 
    $("#login-button").click(function() { 
 
     $("#login-float").toggle() 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="topnav" id="myTopnav"> 
 

 
    <li><a href="#" id="login-button" style="background-color: #404040;">CLIENT AREA</a></li> 
 
    <!--deleted other menu items as they are not important to the issue--> 
 

 
</ul> 
 

 
<div id="login-float" style="display: none;"> 
 

 
    <form id="login-mini" action="login-check.php" method="post"> 
 

 
    <fieldset> 
 

 
     <center> 
 

 
     <h2>Client Login Area</h2> 
 

 
     </center> 
 

 
     <br> 
 

 
     <input class="text-input" type="text" name="username" id="username" placeholder="username"> 
 

 
     <br> 
 

 
     <input class="text-input" type="password" name="password" id="password" placeholder="password"> 
 

 
     <br> 
 

 
     <input class="submit" type="submit" value="Login"> 
 

 
     <br> 
 

 
     <center> 
 

 
     <a href="/contact.php">I can't access my account.</a> 
 

 
     </center> 
 

 

 

 

 
    </fieldset> 
 

 
    </form> 
 

 
</div>

Answer 5

代わりのインラインスタイルを変更すると、それはそんなに簡単に作る、.hiddenクラスを作成し、それを切り替えることができます。

$('#login-button').click(function() { 
 
    var loginFloat = $('#login-float'); 
 
    if (loginFloat.hasClass('hidden')) { 
 
    loginFloat.removeClass('hidden'); 
 
    } else { 
 
    loginFloat.addClass('hidden'); 
 
    } 
 
})

body { 
 
    text-align: center; 
 
    margin-top: 2em; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
#login-button { 
 
    background: #3bb2c1; 
 
    text-decoration: none; 
 
} 
 

 
#login-float { 
 
    background: #51b7b7; 
 
    margin: 2em; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="topnav" id="myTopnav"> 
 
    <li><a href="#" id="login-button">CLIENT AREA</a></li> 
 
</ul> 
 

 
<div id="login-float" class="hidden"> 
 
    <form id="login-mini" action="login-check.php" method="post"> 
 
    <fieldset> 
 
     <center> 
 
     <h2>Client Login Area</h2> 
 
     </center> 
 
     <br> 
 
     <input class="text-input" type="text" name="username" id="username" placeholder="username"> 
 
     <br> 
 
     <input class="text-input" type="password" name="password" id="password" placeholder="password"> 
 
     <br> 
 
     <input class="submit" type="submit" value="Login"> 
 
     <br><br> 
 
     <center> 
 
     <a href="/contact.php">I can't access my account.</a> 
 
     </center> 
 
    </fieldset> 
 
    </form> 
 
</div>