Question

我想知道是否有人理解我的奇怪解释...... 我有一个隐藏的部分设置如下：

<section class="intro">
<label>
  <input type="checkbox">
  <span class="menu">
    <span class="hamburger"></span>
  </span>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>
</section>

<section class="invis">
</section>

.invis {
  display:none;
}

当按下“按钮”时，该部分应再次可见，因此基本上默认：隐藏，当您单击该部分可见时，当您关闭该部分时，该部分应返回显示：无。这是一个奇怪的解释（奇怪的部分介于“** **”之间：

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
  border-radius: 0;
  **display: .invis**;
}

我怎么能这样做？我很感激代码示例

Answer 1

这不是CSS的工作方式。您可以通过单击按钮来打开和关闭类来实现此目的：

document.querySelector("input[type=checkbox]").addEventListener("click", function(){
  document.querySelector(".menu").classList.toggle("invis");
});

.invis {
  display:none;
}

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
  border-radius: 0;
}

<section class="intro">
<label>
  <input type="checkbox">
  <span class="menu invis">
    <span class="hamburger">Hamburger Icon Here</span>
  </span>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>
</section>

Answer 2

我相信这可能就是你所需要的。我更改了以下两个css选择器。

label input:checked + .menu {
  /*box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;*/
  height: 100vh;
  width: 100vw;
  top:0;
  right:0;
  background-color: #fff;
  border-radius: 0;
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 35px;
  right:25px
}

＆＃13;

/* Section styling */
body, html {
    height: 100%;
    margin: 0;
}

* {
  box-sizing: border-box;
}

section {
  width: 100%;
  display: table;
  margin: 0;
  max-width: none;
  height: 100vh;
}

.intro {
  background-color:#291411;
}

.first {
  background-color:#834940;
}

.second {
  background-color:#291411;
}

.third {
  background-color:#834940;
}
/* Hide scrollbars */
html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px; 
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
/* Menu before */
label .hamburger {
  position: absolute;
  top: 135px;
  right: 125px;
  width: 30px;
  height: 2px;
  background: #000;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

label input:checked + .menu {
  /*box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;*/
  height: 100vh;
  width: 100vw;
  top:0;
  right:0;
  background-color: #fff;
  border-radius: 0;
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 35px;
  right:25px
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
}

label input:checked + .menu + ul { opacity: 1; }
/* Menu after */
label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
}

label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}

label a {
  margin-bottom: 1em;
  display: block;
  color: #000;
  text-decoration: none;
}
/* Footer styling */
footer {
  padding: 1% 5%;
  text-align:center;
  background-color: #291411;
  color: #E0C9B7;
}

＆＃13;

<section class="intro">
<label>
  <input type="checkbox">
  <span class="menu">
    <span class="hamburger"></span>
  </span>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>
</section>

<section class="first"> 
first
</section>

<section class="second">  
second
</section>


<section class="third">  
 third
</section>

＆＃13;

＆＃13; 如果需要更正小提琴：https://jsfiddle.net/4h86b8ep/2/

还原隐藏的部分

2 个答案: