css 如何在单击一个按钮时隐藏/显示块?

pbossiut  于 2023-02-01  发布在  其他
关注(0)|答案(4)|浏览(259)
function questionDisplay() {
  let qBtn = document.querySelector(".question");
  let qTextShow = document.createElement("div");
  qBtn.addEventListener("click", ifElse)

  function ifElse() {
    if(qBtn !== true) {
      qTextShow.className = "info_q";
      qTextShow.innerHTML = `text`
      qBtn.appendChild(qTextShow);
      qTextShow.style.display = "block"
    } else {
      qTextShow.style.display = "none"
    }
  }
}
questionDisplay()

qBtn按钮打开了一个带有文本的div,但是在点击它的时候没有隐藏这个块,如何修复?

nwsw7zdq

nwsw7zdq1#

最常见的方法是用HTML编写代码,而不是使用document.createElement()创建元素,默认情况下使用CSS实用程序. class隐藏它,然后使用.classList.toggle()切换该实用程序类,如下所示:

const some_el = document.getElementById('some_id');

document.getElementById('show_text').addEventListener('click', () => some_el.classList.toggle('hidden'));
.hidden {
  display: none;
}
<div id="some_id" class="hidden">
  Some text
</div>

<button id="show_text">Show text</button>
56lgkhnf

56lgkhnf2#

if中,你要做的是检查你想要 * 出现/消失 * 的divblock还是not,一种方法是使用getComputedStyle()方法,它返回一个元素的所有CSS属性的计算值。

function questionDisplay() {
  let qBtn = document.querySelector(".question");
  let qTextShow = document.createElement("div");
  qBtn.addEventListener("click", ifElse)

  function ifElse() {
    let computedStyle = window.getComputedStyle(qTextShow);
    let display = computedStyle.getPropertyValue("display");

    if(display === "none") {
      qTextShow.className = "info_q";
      qTextShow.innerHTML = `text`
      qBtn.appendChild(qTextShow);
      qTextShow.style.display = "block"
    } else {
      qTextShow.style.display = "none"
    }
  }
}
questionDisplay()
6xfqseft

6xfqseft3#

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}
#myDIV {
  display: none
}

#myDIV.mystyle {
  display: block
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
  This is a DIV element.
</div>
olmpazwi

olmpazwi4#

您可以尝试这段代码,其中隐藏和显示元素是通过特定元素的display属性使用css类完成的。

const element = document.querySelector("#element");
const button = document.querySelector(".btn");
button.addEventListener("click",() => {
  element.classList.toggle("hide");
})
.hide{
  display : none;
 }
<div id="element"> This is an element to hide or show </div>
<button class="btn"> Click Me </button>

相关问题