Question

这让我有点疯狂，所以我很感激任何帮助。

我正在尝试制作一个切换开关，看起来它下方有一块颜色，只有在开关打开时才能看到。

因此，当点击开关时，它会向右滑动（向左边添加一些边距）然后再次单击时会向后滑动。事实上，我有两个彼此相邻的lis，两个绝对位置，一个在另一个之上。我正在移动顶级的。但即使它们彼此重叠，底部的绿色背景也是略微可见。这让我很生气。我试过溢出：隐藏在所有元素上。

HTML：

@WithMockUser

CSS：

<ul class="post-list">
    <li class="post-list__month">January</li>
    <li class="post-list__month--hidden"></li>
</ul>

链接到小提琴：https://jsfiddle.net/ez8mcjtw/

Answer 1

您对使用更具语义性的方法有何看法......就像一个简单的复选框？它不需要JavaScript来切换状态，并且可以在需要时用于将数据传递到服务器。这是一个简单的片段，告诉我你的想法：）

.switch{
    display: inline-block;
    cursor: pointer; 
    border: 2px solid #000;
    background-color: green;
}
.switch *{
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
} 
.switch__input{
    position: absolute;
    left: -9999px;
}
.switch__text{
    padding: 10px;
    display: inline-block;
    background-color: #fff;
    transition: all 250ms;
}  
.switch__input:checked + .switch__text{
    margin-left: 30px; 
}

<label class="switch">
    <input type="checkbox" name="" class="switch__input" value=""> 
    <span class="switch__text">Click me!</span>
</label>

同样在Codepen：https://codepen.io/niki_n14o/pen/eMoYZB

在用于切换开关的元件之前

1 个答案: