如何使用单击按钮切换div的可见性

Question

下面是我用来显示div点击时的javascript代码button.

再次点击时如何隐藏它？然后单击它,div应该再次可见？

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>

Answer 1

要在两者之间切换显示样式block,none您可以执行以下操作:

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

工作演示:http://jsfiddle.net/BQUyT/2/

Answer 2

如果您对jQuery soluton感兴趣:

这是HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

这是jQuery脚本

$( "#button" ).click(function() {
    $( "#item" ).toggle();
});

你可以看到它在这里工作:

http://jsfiddle.net/BQUyT/

如果您不知道如何使用jQuery,则必须使用此行来加载库:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

然后使用此行开始:

<script>
$(function() {
    // code to fire once the library finishes downloading.
});
</script>

所以对于这种情况,最终的代码是这样的:

<script>
$(function() {
    $( "#button" ).click(function() {
        $( "#item" ).toggle();
    });
});
</script>

需要帮助请叫我

你可以在这里阅读更多关于jQuery的信息:http://jquery.com/