javascript - jQuery 根据按钮被点击的次数改变元素

Question

我不知道是我不知道如何使用 .toggle() 还是我只是把 .click() 函数写错了但基本上我希望在单击按钮时发生两种不同的情况，具体取决于按钮是否打开。

基本上，如果单击按钮，我希望显示隐藏的 div 并且我希望更改按钮的文本。然后当再次点击时，div 再次隐藏，文本变回之前的样子

$(document).ready( function() {
    var count = 0;

    $("#dropdown-toggle-button").click(function() {
        count++;

    	if (count % 2 !== 0) {

            // on odd clicks do this
            $('#dropdown-column').css('display', 'block');
            $('#dropdown-toggle-button').text('Toggled Button');
        } else if (count % 2 === 0) {

            // on even clicks do this
            $('#dropdown-column').css('display', 'none');
            $('#dropdown-toggle-button').text('Un-toggled Button');
        };
    });
});

#dropdown-column {
  display: none;
}

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

<h2 id="sample-header">Header</h2>
<a href="#" id="dropdown-toggle-button">Un-toggled Button</a>
<div id="dropdown-column">
  <p>Hello, Stranger</p>
</div>

Answer 1

您唯一的问题实际上是语法错误!

首先，你忘了添加额外的内容});关闭外部document.ready函数。

接下来，else if 之前有一个分号。这告诉 javascript 它开始读取另一个语句而不是继续读取之前的 if 语句，这意味着“else”不知道将自己连接到什么。

如果你想更精炼你的代码，else后面的尾随if语句是多余的，如果只有2个状态，那么你可以这样做

if(statement passes as true){
    // do stuff
}
else { 
    // your code here 
}