检查输入时如何将 css 应用于父级的兄弟元素？

Question

我正在努力让移动汉堡导航正常工作，但由于元素的嵌套/关系，我无法将 CSS 应用于元素。我有汉堡包图标（#mobile-menu）根据输入（#nav-trigger）是否被检查（变成X）正确动画。

但是当检查987654323 @ 987654323时，我还想更改#header-nav的绝对定位（在选中时将其带到视图中）。这就是我卡住的地方。选中 #nav-trigger 时，如何使用 CSS 选择器将 CSS 规则更改应用到 #header-nav？我正在使用 SCSS，我尝试过嵌套选择器，如 ~、+ 等，但我无法让它工作。任何帮助是极大的赞赏。谢谢！

<nav id="header-nav">
    <ul>
        <li>
            <a>Nav item</a>
        </li>
        <li>
            <a>Nav item</a>
        </li>
        <!-- etc... -->
    </ul>
</nav>
<div id="mobile-menu-container">
    <div id="mobile-menu-div">
        <label id="mobile-menu-label" for="nav-trigger"></label>
        <input type="checkbox" id="nav-trigger"/>
        <div id="mobile-menu"></div>
    </div>
</div>

Answer 1

使用 javascript - 没有浏览器支持（目前）只能通过 CSS “返回”“遍历”（父级 - 父级 - 兄弟级等）。

div :parent :parent ~ .... no way!! :)

StackOverflow 相关问题： Is there a CSS parent selector?

---

基本的香草 JS 示例：

  var checkbox = document.querySelector("input[name=hamburger]");
  var header = document.getElementById("header-nav");
  var label = document.getElementById("mobile-menu-label");
  var checked = checkbox.checked;

  if (checked){
    // Checkbox is checked..
    header.classList.toggle('active');
    label.innerHTML = "by deafult checked";
  } else{
    label.innerHTML = "by deafult not checked";
  }

  checkbox.addEventListener( 'change', function() {
    if(this.checked) {
      // Checkbox is checked..
      header.classList.toggle('active');
      label.innerHTML = "is true";

    } else {
      // Checkbox is not checked..
      header.classList.toggle('active');
      label.innerHTML = "is false";
    }
  });

input[type=checkbox]:checked ~ #mobile-menu {
  color: white;
  background-color: magenta;
  transition: background-color 0.5s ease;
  font-style: normal;
  cursor: pointer;
} 

#header-nav.active{
  transition: background-color 0.5s ease;
  background: red;
}

label{
  cursor: pointer;
}

<nav id="header-nav">
  <ul>
    <li>
      <a>Nav item</a>
    </li>
    <li>
      <a>Nav item</a>
    </li>
    <!-- etc... -->
  </ul>
</nav>
<div id="mobile-menu-container">
  <div id="mobile-menu-div">
    <input name="hamburger" name="nav-trigger" type="checkbox" id="nav-trigger" checked/>
    <label id="mobile-menu-label" for="nav-trigger">Hello</label>
    <div id="mobile-menu">hamburger</div>
  </div>
</div>

---

通过 jquery

​​>

使用toggleClass() Method： https://www.w3schools.com/jquery/html_toggleclass.asp

StackOverflow 相关问题：Jquery if checkbox is checked add a class

jQuery 遍历方法

jQuery traversing，意思是“移动通过”，用于“查找”（或 select) HTML 元素基于它们与其他元素的关系。

https://www.w3schools.com/jquery/jquery_ref_traversing.asp