CSS checked 不适用于 html <ul> 元素

Question

我正在尝试使用 checked 使 ul 元素上下动画，但它不起作用，我不确定它是否与 translateY 动画或 ul 元素有关。我已经尝试使用“+”而不是“~”，但我仍然遇到同样的问题。

.events{
 position: absolute;
 width: 100%;
 color: #fff;
 font-family: Verdana;
 box-sizing: border-box;
 transform: translateY(120%);
 top: 120px;
 transition: all 0.5s;
}

.events li {
 background-color: rgba(0,0,0,0.8);
 width: 319px;
 height: 120px;
 margin: auto;
 margin-bottom: 10px;
 border-radius: 10px;
}

.swipe-container {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 130px;
 text-align: center;
 background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

#swipe-up {
 display: none;
}

.icon-swipe {
 font-size: 50px;
 color: #fff;
 font-family: Oswald light;
 cursor: pointer;
}

#swipe-up:checked ~ .events{
 transform: translateY(0%);
}

  <div id="events-wrapper">
    <div class="swipe-container">
     <input type="checkbox" id="swipe-up">
     <label class="icon-swipe" for="swipe-up">eventos</label>
    </div>
    <nav class="events">
     <li><a href="">1</a></li>
     <li><a href="">2</a></li>
     <li><a href="">3</a></li>
     <li><a href="">4</a></li>
    </nav>
  </div>

Answer 1

首先，我建议为列表 (.events) 使用实际的 <ul>，它现在是导航 html 标签 <nav>。 ;)

当您使用以下代码时：

#swipe-up:checked ~ .events{
    transform: translateY(0%);
}

浏览器期望它在同一个父级中，但在您的示例中不是。我对其进行了一些编辑，使其仅适用于 CSS。如果你想要你的旧结构，你可以求助于 JavaScript 到 show/hide 你的列表。

.events{
 position: absolute;
 width: 100%;
 color: #fff;
 font-family: Verdana;
 box-sizing: border-box;
 transform: translateY(120%);
 top: 120px;
 transition: all 0.5s;
}

.events li {
 background-color: rgba(0,0,0,0.8);
 width: 319px;
 height: 120px;
 margin: auto;
 margin-bottom: 10px;
 border-radius: 10px;
}

.swipe-container {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 130px;
 text-align: center;
 background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

#swipe-up {
 display: none;
}

.icon-swipe {
 font-size: 50px;
 color: #fff;
 font-family: Oswald light;
 cursor: pointer;
}

#swipe-up:checked ~ .events{
 transform: translateY(0%);
}

<div id="events-wrapper">
    <div class="swipe-container">
     <input type="checkbox" id="swipe-up">
          <label class="icon-swipe" for="swipe-up">eventos</label>

          <ul class="events">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
          </ul>
    </div>
  </div>

更新 - JavaScript（首选）

对于 JavaScript 解决方案，您可以使用下面的示例。如您所见，我们还可以稍微清理 HTML 结构以使其更简单。

我还在 body 上设置了 class，如果你想让其他元素对这个事件做出反应，这会给你更多的灵活性。

(function() {
  // Get element which will react to the click, can be anything.
  const element = document.querySelector('.js-showEvents');
  // Added class to the body after a click on the element.
  const classActive = "events-is-active";
  // Just getting the body.
  const body = document.body;

  // Before we do anything to the element, check if it exists.
  if (element != null) {
    // Add a event that 'listens' to a click on a given element, in this case '.js-showEvents'.
    element.addEventListener("click", (e) => {
      // Set a variable to check if the events are already 'active'
      const isOpen = body.classList.contains(`${classActive}`);

      // If events is not clicked yet, add class to the body.
      if (!isOpen) {
        body.classList.add(`${classActive}`);
      } else {
        // If events has already been clicked, remove class from body.
        body.classList.remove(`${classActive}`);
      }
    });
  } else {
    console.log(`Given element does not exist.`);
  }
})();

.events {
  position: absolute;
  width: 100%;
  color: #fff;
  font-family: Verdana;
  box-sizing: border-box;
  transform: translateY(120%);
  top: 120px;
  transition: all 0.5s;
}

.events-is-active .events {
  transform: translateY(0%);
}

.events li {
  background-color: rgba(0, 0, 0, 0.8);
  width: 319px;
  height: 120px;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 10px;
}

.swipe-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 130px;
  text-align: center;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.events-title {
  font-family: Oswald light;
  font-size: 50px;
  font-weight: normal;
  color: #fff;
  cursor: pointer;
}

<div id="events-wrapper">
  <div class="swipe-container">
    <!-- 
      Added 'js-showEvents' as a JS 'hook', to seperate functional classes and styling classes. This class can only be used once on a page, since I used 'querySelector' in this example to keep it simple.
    -->
    <h1 class="events-title js-showEvents">eventos</h1>

    <ul class="events">
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
    </ul>
  </div>
</div>

CSS checked 不适用于 html <ul> 元素

CSS checked is not working with html <ul> element

html

css

translate

html-lists

checked