jQuery .click to toggle div 内容

Question

我目前有以下div来显示某个结果

<div id="results">
        <span id="eresult">0</span>|
        <span id="gresult">0</span>|
        <span id="aresult">0</span>|
        <span id="presult">0</span>|
        <span id="vpresult">0</span>
    </div>

但是，我想在单击以下输入按钮时切换可见性：

<input id="rbu" type="image" src="toggle.png" width="50" height="50">

这是我的jQuery

$("#rbu").click(function () {
    $("#results").toggle();
});

单击 div 后确实会消失，但不会再次出现。如何让它再次显示？

Answer 1

试试

$("#rbu").click(function () {
    if($("#results").is(':hidden')) $("#results").show();
    else $("#results").hide();
});

Answer 2

这与 Chrome 一起工作，您的代码没有任何变化：

$("#rbu").click(function () {
    $("#results").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
  <span id="eresult">0</span>|
  <span id="gresult">0</span>|
  <span id="aresult">0</span>|
  <span id="presult">0</span>|
  <span id="vpresult">0</span>
</div>

<input id="rbu" type="image" src="toggle.png" width="50" height="50">

错误可能出在您的代码中的其他地方，请尝试清除它？

Answer 3

不要使用 .click - 如果你的 dom 改变了，它就不再起作用了..试试 .on 方法：

$("#rbu").on('click', function() {
    $("#results").toggle();
});

如果#rbu 是 link 或带有自己的侦听器（事件）的按钮，试试这个：

$("#rbu").on('click', function(event) {
        event.preventDefault();
        $("#results").toggle();
});

jQuery .click to toggle div 内容

jQuery .click to toggle div content

html

css

jquery