我的按钮显示 div，但如何在第二次点击后隐藏 div？

Question

好的。所以我完成了按钮，它显示了另外四个项目 (divs)。有人可以帮我如何切换此按钮吗？我想通过第二次单击同一个按钮来隐藏这四个项目。这是代码：

<script type="text/javascript">
function showDiv() {
    document.getElementById('four-more-portfolio-items').style.display = "block";}
</script>

和HTML：

<div id="four-more-portfolio-items" style="display: none;">
......
......
......
</div>

Answer 1

您可以使用 jQuery toggle() 方法完成此任务。

$("#button_id").click(function() {
    $("#four-more-portfolio-items").toggle();
});

见http://api.jquery.com/toggle/

Answer 2

脚本：

<script>
function showDiv() {
    var x = document.getElementById("four-more-portfolio-items");
    if(x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

HTML:

<div id="four-more-portfolio-items" style="display: none;">
......
......
......
</div>

<button onClick="showDiv()">Show Div</button>

程序开始时 div 未显示，但单击按钮后显示。

我的按钮显示 div，但如何在第二次点击后隐藏 div？

My button is showing div, but how to hide div after second click?

togglebutton