Question

我正在寻找一种在程序启动时隐藏div元素的方法，并且在该程序中单击按钮（更改日志）时，它应该显示Div元素。我想先隐藏div元素，然后单击按钮时它应该显示div元素。

function ChangeLog(){

       if (document.getElementById('divChangeLog').style.display === 
            "none")
      {
         document.getElementById('divChangeLog').style.display = "block";
    }
      else {
        document.getElementById('divChangeLog').style.display = "none";
   }

  }

Answer 1

将元素设置为具有隐藏它的CSS类。这将需要在页面首次加载时将其隐藏起来。
在click的{{1}}事件回调中，切换该CSS类揭示或隐藏元素。

仅供参考：如果可以帮助，请不要使用内联样式。如果需要，它会使CSS难以覆盖。相反，请使用预制的CSS类，并根据需要添加，删除或切换它们。

button

let btn = document.querySelector("button");     // Get reference to button
let div = document.querySelector("div.hidden"); // Get reference to hidden div

// Set up click event on button
btn.addEventListener("click", function(){
  div.classList.toggle("hidden"); // Toggle CSS
});

.hidden { display:none; }

Answer 2

这是您想要的吗？

function changeLog() {
  let changeLogDiv = document.getElementById("changeLogDiv")
  if (changeLogDiv.className === "hide") {
    changeLogDiv.className = "show"
  } else {
    changeLogDiv.className = "hide"
  }
}

document.getElementById("showHideButton").addEventListener("click", changeLog)

.hide {
  display: none;
}

.show {
  display: block;
}

<button id="showHideButton">show/hide</button>
<div id="changeLogDiv" class="hide">Hello, World!</div>

从div隐藏开始，然后在按下按钮时显示并隐藏它。

希望这会有所帮助。

Answer 3

使用jQuery

function ChangeLog(){
   if($('#changeLogDiv:visible').length == 0)
   {
       $('#changeLogDiv').show();
   }else{
       $('#changeLogDiv').hide();
   }
}

Answer 4

仅使用js（jQuery），先用.hide()（或.toggle(false)）隐藏元素，然后单击按钮时用.toggle()切换可见性。

const $changeLog = $('#divChangeLog');
$changeLog.hide();
const $button = $('#change');
$button.click(function() {
  $changeLog.toggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="change">Change visibility</button>
<div id="divChangeLog">
  <p>Hello World</p>
</div>

程序启动时无法获取隐藏选项

4 个答案: