如何在单击复选框并返回时更改父类？答案

【问题标题】：How can i change class of parent on click of checkbox and back?如何在单击复选框并返回时更改父类？
【发布时间】：2017-03-03 19:55:06
【问题描述】：

我制作了一个响应式菜单，如果您使用移动设备，一切正常。我希望汉堡图标与菜单链接一起滚动，现在如果您滚动它只是停留在顶部，需要给汉堡图标一个固定的点击位置，如果再次点击它，将其返回到绝对位置

我尝试过使用 javascript 和 sass，如果它可以只用纯 css 完成，那么它的完美或其他一些 javascript 就可以了

图标 id 是#menutoggle

#header {
  transition: all 300 ms ease;
  font-size: 0.9em;
  font-weight: 300;
  background: black;
  margin: 0 auto;
  padding: 2em 0 1em;
  border-bottom: 4px solid red;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header {
    padding: 1em 0;
  }
}
@media only screen and (max-width: 767px) {
  #header {
    height: 4em;
    padding: 0;
  }
}
#header a {
  color: white;
}
#header .header-inner {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  height: 4em;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .header-inner {
    max-width: 768px;
    height: 3em;
  }
}
@media only screen and (max-width: 767px) {
  #header .header-inner {
    height: 4em;
    padding: 0 1em 1em;
  }
}
#header .navbar {
  top: 0;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  #header .navbar {
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
}
#header .navbar .leaf {
  transition: all 300ms ease;
  border-radius: 20px;
}
#header .navbar .leaf:hover {
  background: red;
}
#header .navbar .logo {
  margin: 1em 0;
  position: absolute;
  right: 360px;
  text-align: center;
  top: -38px;
  z-index: 5;
}
@media only screen and (max-width: 767px) {
  #header .navbar .logo {
    position: absolute;
    transform: translate(50%, 0px);
    margin: 0 auto;
    width: 60px;
    height: 50px;
    right: 50%;
    top: 5px;
    background: url("../images/crown.jpg.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .navbar .logo {
    margin: 0.5em 0;
    right: 280px;
    top: -20px;
  }
}
#header .navbar .logo img {
  background-position: contain;
  width: 300px;
}
@media only screen and (max-width: 767px) {
  #header .navbar .logo img {
    width: 135px;
    height: 50px;
    opacity: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .navbar .logo img {
    width: 225px;
  }
}
#header .navbar .menu {
  text-align: center;
  margin-top: 2em;
}
@media only screen and (max-width: 767px) {
  #header .navbar .menu {
    display: none;
  }
}
#header .navbar .menu ul {
  list-style-type: none;
}
#header .navbar .menu ul .video {
  margin-right: 345px;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #header .navbar .menu ul .video {
    margin-right: 260px;
  }
}
#header .navbar .menu li {
  display: inline;
  padding: 10px 1.2em;
  margin-right: 40px;
}
@media only screen and (min-width: 1024px) {
  #header .navbar .menu li {
    padding: 10px 1.2em;
    margin-right: 40px;
  }
}
#header .navbar .menu li:last-child {
  margin-right: 0px;
}
#header .navbar nav {
  display: none;
  transition: all 300ms ease;
  width: 100%;
  /* And let's fade it in from the left */
}
@media only screen and (max-width: 767px) {
  #header .navbar nav {
    display: block;
  }
}
#header .navbar nav a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease;
}
#header .navbar nav a:hover {
  color: red;
}
#header .navbar nav #menuToggle {
  display: block;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  top: 16px;
}
#header .navbar nav #menuToggle input {
  display: block;
  width: 55px;
  height: 32px;
  position: absolute;
  top: 0px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 12;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
#header .navbar nav #menuToggle ul a {
  width: 100;
  display: block;
  border-bottom: 1px solid rgba(215, 7, 120, 0.2);
}
#header .navbar nav #menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-left: 10px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 3;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
#header .navbar nav #menuToggle span:first-child {
  transform-origin: 0% 0%;
  margin-left: 10px;
}
#header .navbar nav #menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
  margin-left: 10px;
}
#header .navbar nav #menuToggle input:checked ~ span {
  opacity: 1;
  margin-left: 10px;
  transform: rotate(45deg) translate(-2px, -1px);
  background: red;
}
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(3) {
  margin-left: 10px;
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(2) {
  margin-left: 10px;
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}
#header .navbar nav #menu {
  position: absolute;
  width: 100%;
  padding: 50px;
  height: 100vh;
  top: 0;
  position: fixed;
  background: black;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#header .navbar nav #menu li {
  padding: 10px 0;
  font-size: 22px;
}
#header .navbar nav #menuToggle input:checked ~ ul {
  transform: scale(1, 1);
  opacity: 1;
  width: 100%;
  top: 0;
}

.blok {
  width: 100%;
  height: 1000px;
  background: blue;
}

<body>
  <section id="home">
    <div id="header">
      <div class="header-inner">
        <div class="navbar">
          <div class="logo">
            <img src="" />
          </div>
          <div class="menu">
            <ul class="menu">
              <li class="leaf"><a title="" href="/photo">Home</a></li>
              <li class="leaf video"><a title="" href="/video">About</a></li>
              <li class="leaf"><a title="" href="/music">Menu</a></li>
              <li class="leaf"><a title="" href="/forum">Contact</a></li>
            </ul>
          </div>
          <nav role="navigation">
            <div id="menuToggle">
              <input type="checkbox" />
              <span></span>
              <span></span>
              <span></span>
              <ul id="menu">
                <a href="#">
                  <li>Home</li>
                </a>
                <hr class="line-menu">
                <a href="#">
                  <li>About</li>
                </a>
                <hr class="line-menu">
                <a href="#">
                  <li>Info</li>
                </a>
                <hr class="line-menu">
                <a href="#">
                  <li>Contact</li>
                </a>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
    <!--end header-->
    <!--begin header-->
    <div class="blok"></div>

【问题讨论】：

这里为什么不能自己添加代码？
我不明白？添加链接本身的方式
请在问题中添加您的代码。规则是有原因的；链接腐烂可能意味着这个问题对未来的访问者毫无用处。颠覆规则只会让人们更难帮助你，这意味着你不会得到任何帮助和更多的反对票。
啊啊不知道让我更新一下

标签： javascript jquery html css sass

【解决方案1】：

添加此代码

 @media only screen and(max-width: 767px) {
     #header {
         position: fixed;
         top: 0;
         width: 100% ;
     }
 }

【讨论】：

@amirhanif, ?检查代码笔，使屏幕更小。

【解决方案2】：

jq:

$(document).on('change', '.checkbox', function() {
     $('#menutoggle').toggleClass('position-style');
});

css:

.position-style {
     position: fixed;
}

希望对你有所帮助；]

//编辑https://jsfiddle.net/zfo5nzf3/ 此代码有效，它根据您的“图标 id 为 #menutoggle

【讨论】：

你安装了jquery库吗？