顯示/隱藏 <div> 使用JavaScript

Question

例如，我有一個名為showcontainer的函數。 當我單擊一個激活它的按鈕時，我希望某個div元素（在本例中為<div id="container"> ）淡入。再次單擊時，淡出。 我該如何實現？

注意：我不習慣使用jQuery。

Answer 1

因此，您得到了一堆jQuery答案。 很好，我也傾向於將jQuery用於此類內容。 但是用普通的JavaScript做到這一點並不難，只是更加冗長：

var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');

btn.onclick = function() {

    // Fade out
    if(container.style.display != 'none') {
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity -= 5;
        container.style.opacity = opacity/100;
        if(opacity <= 0) {
          clearInterval(fade);
          container.style.opacity = 0;
          container.style.display = 'none';
        }
      }, 50);

    // Fade in
    } else {
      container.style.display = 'block';
      container.style.opacity = 0;
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity += 5;
        container.style.opacity = opacity/100;
        if(opacity >= 100) {
          clearInterval(fade);
          container.style.opacity = 1;
        }
      }, 50);
    }

};

檢查工作演示 。

Answer 2

您能做的最好的事情就是立即開始並習慣使用jQuery。

http://api.jquery.com/fadeIn/頁面包含可以在此處編寫的所有示例代碼。 基本上，您想在showcontainer函數中調用調用fadeIn。

function showcontainer() {
    $('#container').fadeIn();
}

Answer 3

如果您不反對使用jQuery本身，則可以輕松實現此目的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#showcontainer').click(function() {
            $('#container').fadeToggle();
        });
    });
</script>
...
<div id="container">
...
</div>
...

<input type="button" id="showcontainer" value="Show/hide"/>
...

請注意，在jQuery源代碼的開頭缺少了http: 。 使用此技巧，瀏覽器將根據原始頁面是否安全自動使用http:或https:

包含jQuery之后的代碼片段將處理程序分配給按鈕。

Answer 4

您可以看一下jQuery UI Toggle 。

該文檔使該庫的使用變得非常簡單，並且它們具有許多代碼示例。

Answer 5

您最好還是學習jQuery，因為它使做事變得容易得多！

從它的聲音來看，您可以在HTML中已有容器div，但其樣式為“ display：none;”，然后使用（ jQuery ）在單擊事件中簡單地將其顯示：

$('#container').fadeIn('slow', function() {
    //Any additional logic after it's visible can go here
  });