漢堡選單僅使用CSS不起作用

我有以下代碼。無論是否選中復選框，漢堡包選單始終顯示。

input[type=checkbox]:checked .hamburger-menu {
  animation: menu-display 0.3s forwards ease-in-out;
}

@keyframes menu-display {
  from {
    display: none;
  }
  to {
    display: block;
  }
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
    </div>
  </nav>
  <!-- end of navbar -->
  <div class='hamburger-menu'>
    <li><a href="{% url 'home' %}">Home</a></li>
    <li><a href="{% url 'BlogListView' %}">Blog</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </div>
</div>

我希望在.hamburger-menu選中復選框時顯示。

uj5u.com熱心網友回復：

嘗試這個

input[type=checkbox] ~ .hamburger-menu {
  display: none;
}

input[type=checkbox]:checked ~ .hamburger-menu {
  display: block;
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
      <div class='hamburger-menu'>
        <li><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'BlogListView' %}">Blog</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </div>
    </div>
  </nav>
  <!-- end of navbar -->
</div>

uj5u.com熱心網友回復：

問題出在您的 css 選擇器中input[type=checkbox]:checked .hamburger-menu。

該選擇器.hamburger-menu在input[type=checkbox]具有 state的元素中選擇具有 class的元素:checked。

您的標記不包含此類構造（無論如何這都是無效的，因為您實際上無法將內容放入標簽中）。

無論如何，即使它會正確選擇，您也正在嘗試為displaycss 屬性設定影片，這是不可能的。

放棄影片嘗試，您可以使用 JavaScript 來顯示/隱藏選單。

let checkbox = document.querySelector('#checkbox');
let menu = document.querySelector('.hamburger-menu');

checkbox.addEventListener('change', (event) => {
  if (event.target.checked === true)
    menu.classList.add('visible');
  else
    menu.classList.remove('visible');
});

.hamburger-menu {
  display: none;
}

.hamburger-menu.visible {
  display: block;
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
    </div>
  </nav>
  <!-- end of navbar -->
  <div class='hamburger-menu'>
    <li><a href="{% url 'home' %}">Home</a></li>
    <li><a href="{% url 'BlogListView' %}">Blog</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </div>
</div>

標籤：html css 动画片

上一篇：如何使用指標來使用嵌套結構內的結構成員？

下一篇：滑動擴展影片旁邊的專案