Question

我一直试图创建一个盒子和两个可以在点击时滑入的元素，为另一个切换一个，但我希望它们只能在盒子里面看到。

这是我糟糕的，愚蠢的，臭气熏天的＆＃39;代码，请协助。

HTML

<input id="toggle" type="checkbox">
<label for="toggle">
  <button>switch</button>
</label>
<div id="box" style="background:rgba(0, 0, 0, 0.4); box-shadow:inset 0px 0px 10px 0px #000;
    text-shadow: 2px 2px 2px #000; padding: 5px 5px 5px 5px; letter-spacing: 0px; font-size: 18px;">
  <div id="slider">
    <table>
      <tr>
        <td id="t2"><a id="s2" href="https://soundcloud.com/" target="_blank" rel="noopener nofollow">Soundcloud</a></td>
        <td id="t2"><a id="s2" href="https://mixcloud.com/" target="_blank" rel="noopener nofollow">Mixcloud</a></td>
        <td id="t2"><a id="s2" href="bandcamp.com" target="_blank" rel="noopener nofollow">Bandcamp</a></td>
        <td id="t2"><a id="s2" href="https://hearthis.at" target="_blank" rel="noopener nofollow">Hearthis.at</a></td>
        <td id="t2"><a id="s2" href="https://archive.org" target="_blank" rel="noopener nofollow">Archive</a></td>
      </tr>
    </table>
  </div>
  <div id="slider2">
    <table>
      <tr>
        <td id="t2">1111111111111</td>
        <td id="t2">222222</td>
        <td id="t2">333333</td>
        <td id="t2">4444444444</td>
        <td id="t2">5555555</td>
      </tr>
    </table>
  </div>
</div>

CSS。

#box {
    height: 50px;
    width: 100%;
    border: 1px solixyzd #ccc;
}
#slider {
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1);
    transition: all .5s cubic-bezier(0.42,0,0.58,1);
}
#toggle {
    position: absolute;
  visibility: hidden;
}
#toggle + label {
    cursor: pointer;
}
#slider2 {
  margin-top: -100px;
    overflow-y: hidden;
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1);
    transition: all .5s cubic-bezier(0.42,0,0.58,1);
}
#toggle:checked ~ #box > #slider {
  margin-top: -80px;
}
#toggle:checked ~ #box > #slider2 {
  margin-top: 50px;
}

https://codepen.io/pen/xdeevd

Answer 1

使用父类和子类，默认情况下隐藏Child。就像这个例子一样。

Css：

.child{display:none}
.parent .child{ display:block }

Html：

<div class="parent">
     <div class="child"> Visible Division </div>
</div>
<div class="child">Hidden Division</div>

Answer 2

添加溢出：隐藏到框中应该有效。

let

Answer 3

你隐藏你的方式，它不起作用。

因此，在CSS下方更改它将起作用

#toggle {
position: absolute;
opacity: 0; 
}
#toggle:checked ~ #box > #slider2{
    margin-top: 10px;
    display: block;
}
#toggle:checked ~ #box > #slider{
    display: none;
}

休息你可以使用自己的想法获得更多动画，点击左上角这样复选框可以工作，或者你可以同时谷歌隐藏复选框使它工作。

谢谢， Debashis

仅在元素位于另一个元素内时显示该元素

3 个答案: