Question

我不知道我是否只是不知道如何使用.toggle()或者如果我只是写.click()函数错了，但基本上我想要两个不同的单击按钮时发生的事情，具体取决于是否切换。

基本上如果单击按钮，我希望隐藏的div显示，我希望按钮的文本发生变化。然后当它再次被点击时，div再次被隐藏，文本变回原来的状态

＆＃13;

$(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');
        };
    });
});

＆＃13;

#dropdown-column {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 1

你唯一的问题实际上是语法错误！

首先，您忘记添加额外的}）;关闭外部document.ready功能。

接下来，如果是，则在分号前加分号。这告诉javascript它开始阅读另一个语句，而不是继续读取之前的if语句，这意味着＆＃34;否则＆＃34;不知道连接自己的内容。

如果你想稍微改进你的代码，那么在else之后的尾随if语句是多余的，如果只有2个状态，那么你可以做到

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

Answer 2

看起来你的javascript中的父/大括号匹配有点偏。试试这个：

$(document).ready( function() {
  var count = 0;
  $("#dropdown-toggle-button").click(function() {
    count++;

    if (count % 2 !== 0) {
      $('#dropdown-column').css('display', 'block');
      $('#dropdown-toggle-button').text('Toggled Button');
    }
    else {
      $('#dropdown-column').css('display', 'none');
      $('#dropdown-toggle-button').text('Un-toggled Button');
    }
  });
});

Answer 3

根据jQuery文档，（http://api.jquery.com/toggle/）

没有参数，.toggle（）方法只是切换可见性元素：

$( ".target" ).toggle();

匹配的元素将立即显示或隐藏，没有动画，通过更改CSS显示属性。如果元素是最初显示，它将被隐藏;如果隐藏，它将被显示。将根据需要保存和还原display属性。如果一个元素具有内联的显示值，然后隐藏并显示，它将一次再次以内联方式显示。

因此，虽然您编写的代码应该可以正常工作，但它不是一个非常干净的解决方案。我建议如下，使用jquery内置的.toggle函数。

$(document).ready( function() {

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

        // first toggle the display of the column element
        $('#dropdown-column').toggle();

        // then check for its display status
        // http://api.jquery.com/visible-selector/
        if ($('#dropdown-column').is(':visible')) {
            // display: block
            $('#dropdown-toggle-button').text('Toggled Button');

        } else {
            // display: none
            $('#dropdown-toggle-button').text('Un-toggled Button');
        }



    });
});

jQuery更改元素取决于单击按钮的次数

3 个答案: