显示无不隐藏孩子？

Question

我遇到了一些麻烦display: none;

这个想法很简单：

我的网站上有步骤，当我们完成第一步时，我们会进入下一步，而当我们进入下一步时，上一步就会隐藏。

我检查了 JavaScript，它工作正常；我看到div的display属性是none，但它的孩子仍然存在；我会给出 JavaScript 以防万一。

const first = document.getElementById('first');
const second = document.getElementById('second');
const third = document.getElementById('third');

const stepNumber = document.getElementById('step-number');

const next_btn = document.getElementById('next-btn');
const prev_btn = document.getElementById('prev-btn');

stepNumber.innerHTML = '1';

prev_btn.addEventListener('click', () => {
  stepNumber.innerHTML = Number(stepNumber.innerHTML) - 1;
  updateStep();
});

next_btn.addEventListener('click', () => {
  stepNumber.innerHTML = Number(stepNumber.innerHTML) + 1;
  updateStep();
});

function updateStep() {
  console.log(stepNumber.innerHTML)
  switch (Number(stepNumber.innerHTML)) {
    case 0:
      console.log('here')
      location.href = 'http://127.0.0.1:8000/start/';
      break;
    case 1:
      console.log('first')
      first.style.display = 'flex';
      second.style.display = 'none';
      third.style.display = 'none';
      next_btn.innerHTML = 'Next';
      next_btn.id = 'next-btn';
      break;
    case 2:
      console.log('second')
      first.style.display = 'none';
      second.style.display = 'flex';
      third.style.display = 'none';
      next_btn.innerHTML = 'Next';
      next_btn.id = 'next-btn';
      break;
    case 3:
      console.log('third')
      first.style.display = 'none';
      second.style.display = 'none';
      third.style.display = 'flex';
      next_btn.innerHTML = 'Finish';
      next_btn.id = 'finish-btn';
      break;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div style="margin-top: 0.5em;" class="d-flex flex-column align-items-center">
  <div id="first" class="d-flex flex-column" style="display: none;">
    <h4 style="margin-bottom: 1.2em;"><b>Create Your Account</b></h4>
    <input class="form-control m_textinput" type="text" placeholder="Username" name="username" id="username-input">
    <input class="form-control m_textinput" type="email" placeholder="Email" name="email" id="email-input">
    <div style="font-size: 14px; width: 25em;" class="d-flex flex-column">
      <span><b>Date of birth</b></span>
      <p style="font-size: 12px;" class="text-muted">This will not be displayed publicly. Even if this account is for a business, pet, or something else, you'll still need to verify your own age.</p>
    </div>
    <div class="d-flex">
      <select id="b-month-select-input" class="form-select m_selectinput" aria-label="Default select example">
      </select>
      <select id="b-day-select-input" class="form-select m_selectinput" aria-label="Default select example">
      </select>
      <select id="b-year-select-input" class="form-select m_selectinput" aria-label="Default select example">
      </select>
    </div>
  </div>

  <div id="second" class="d-flex flex-column" style="display: none;">

  </div>

  <div id="third" class="d-flex flex-column" style="display: none;">

  </div>

  <button id="next-btn" class="mt-5 btn btn-light rounded-pill" style="width: 25em;" type="button">Next</button>
</div>

Answer 1

您使用的d-flex类的样式与 Bootstrap 中的样式相同display: flex !important，因此会覆盖您的display: none. none !important如果您需要覆盖类的样式，请应用内联样式d-flex。

或者，更好的是，不要混合内联样式和 Bootstrap 类。即，要么仅应用内联样式，而不应用d-flex，要么仅应用类，不通过样式属性隐藏 <div> ，而是通过删除d-flex并添加d-none类来隐藏 <div> 。