如何通過單擊按鈕來切換 div 的可見性

Question

下面是我用來在單擊button時顯示div javascript 代碼。

再次單擊時如何隱藏它？ 然后點擊它， 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 解決方案感興趣：

這是 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/

Answer 3

如果您想使用它，jQuery 將是最簡單的方法，但這應該可行。

function showHide(){
    var e = document.getElementById('e');

    if ( e.style.display !== 'none' ) {
        e.style.display = 'none';
    } else {
        e.style.display = '';
    }
}

Answer 4

嘗試以下邏輯：

<script type="text/javascript">
function showHideDiv(id) {
    var e = document.getElementById(id);
    if(e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
</script>

Answer 5

您可以使用 jquery 切換輕松地做到這一點。 通過此切換或滑動切換，您還將獲得不錯的動畫和效果。

 $(function(){ $("#details_content").css("display","none"); $(".myButton").click(function(){ $("#details_content").slideToggle(1000); }) })

 <div class="main"> <h2 class="myButton" style="cursor:pointer">Click Me</h2> <div id="details_content"> <h1> Lorem Ipsum is simply dummy text</h1> <p> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div>

Answer 6

使用 JQuery .toggle()你可以輕松完成

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

Answer 7

Bootstrap 4 為此提供了Collapse 組件。 它在幕后使用 JavaScript，但您不必自己編寫任何 JavaScript。

此功能適用於<button>和<a> 。

如果使用<button> ，則必須設置data-toggle和data-target屬性：

<button type="button" data-toggle="collapse" data-target="#collapseExample">
  Toggle
</button>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>

如果使用<a> ，則必須使用 set href和data-toggle ：

<a data-toggle="collapse" href="#collapseExample">
  Toggle
</a>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>