Question

在这种情况下我不能使用JavaScript。

我有一个整体大小的弹出窗口，我想用一种按钮隐藏它。 HTML看起来像那样

    <div class="overlay2">
    <!--the rest of content -->
    <label for="menu-toggle">Hide</label>
    <input type="checkbox" id="menu-toggle"/>
    </div>

我的SCSS / CSS看起来是：

.overlay2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0ad4e;
  z-index: 100;

  opacity: 1;
  display: block;
}
    label {
      cursor: pointer;
    }
    #menu-toggle{
      display: none; /* hide the checkbox */
    }

    .overlay2 {
    $is_checked: menu-toggle;
    @if is_checked{
      display: none;
    }
}

此弹出窗口为 .overlay2

我觉得我的风格的最后一部分有问题。我不知道如何检查是否选中了复选框。

Answer 1

以下是一个例子：

<input type="checkbox" id="toggle">
<label for="toggle">&equiv;</label>
<ul>
    <li>
        <a href="#">Some Links</a>
    </li>
</ul>

和css：

#toggle:checked ~ ul li {
    display:block; /* or display:none; */
}
#toggle{
    display:none;
}

您可以将ul li替换为.overlay2或其他内容。

编辑：

你想要这样的东西吗？单击标签，同时隐藏标签和其余内容。

<div class="overlay2">
    <input type="checkbox" id="menu-toggle"/>
    <label for="menu-toggle">Hide</label>
    <div class="others">
        the rest of content
    </div>
</div>

CSS：

#menu-toggle{
  display:none;
}
#menu-toggle:checked ~ .others{
  display:none;
}
#menu-toggle:checked ~ label[for=menu-toggle]{
  display:none;
}

如果选中复选框，则隐藏元素

1 个答案:

编辑：