检查输入后如何将css应用于父级的同级元素？

Question

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

但是当选中#nav-trigger时，我也想更改#header-nav的绝对位置（选中时将其显示）。这就是我卡住的地方。选中#header-nav时，如何使用CSS选择器将CSS规则更改应用于#nav-trigger？我正在使用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遍历，意思是“穿越”，用于“查找”（或根据它们与其他元素的关系选择）HTML元素。

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