时间戳

首页 > 解决方案 > 检查输入时如何将 css 应用于父级的兄弟元素？

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

问题描述

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

但是当#nav-trigger被选中时，我也想改变的绝对定位#header-nav（选中时将其置于视图中）。这就是我卡住的地方。我如何使用 CSS 选择器将 CSS 规则更改应用于#header-nav何时#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>

标签： csssassnavigationcss-selectors

解决方案

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

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

相关 StackOverflow 问： 有 CSS 父选择器吗？

基本的香草 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 Q：如果选中复选框，则 Jquery 添加一个类

jQuery 遍历方法

jQuery 遍历，意思是“移动”，用于根据 HTML 元素与其他元素的关系“查找”（或选择）HTML 元素。

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

推荐阅读