CSS3 向下切换效果，重复，不起作用，为什么？

Question

我正在尝试创建不同的链接，以便在点击时切换不同的内容:

<section id="slidebox">
    <div id="toggle">
        <a class="bot" href="#">Push me</a>
        <a class="top" href="#slidebox">Push me</a>
    </div>
    <div id="box">    
        Lorem ipsum dolor.
    </div>
</section> 

<section id="slidebox">
    <div id="toggle">
        <a class="bot" href="#">Push me 2</a>
        <a class="top" href="#slidebox">Push me 2</a>
    </div>
    <div id="box">    
        OTHER CONTENT
    </div>
</section>

CSS 代码:

#toggle {
    height:30px;
    position:relative;
    z-index:2;
}
#toggle a { position: absolute; }

#toggle {
    height:30px;
    position:relative;
    z-index:2;
}
#toggle a { position: absolute; }

#box {
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition: all .4s ease-out;
}

#slidebox:target #box {
    max-height:100px;
    opacity:1;
}

#slidebox:target .top { opacity:0;pointer-events: none;}

我想像在每个部分的列中一样水平重复，但使用不同的文本/内容。问题在于，在执行此操作时(使用 float:left)，当您单击不同的部分时，它会触发并向下滑动第 1 部分的内容。

为什么会这样？有什么办法可以让栏目连续且内容独立？这让我抓狂!

非常感谢。

Answer 1

您的问题是您多次使用同一个 ID。 不要那样做。无论您在做什么，它都会产生问题，而且形式不正确。改用类，只使用ID获取特定对象

Working example

/* CSS */
.toggle {
    height:30px;
    position:relative;
    z-index:2;
}
.toggle a { position: absolute; }
.box {
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition: all .4s ease-out;
}
.slidebox:target .box {
    max-height:100px;
    opacity:1;
}
.slidebox:target .top { opacity:0; pointer-events: none;}

/* HTML */
<section id="pushOne" class="slidebox">
    <div class="toggle">
        <a class="bot" href="#">Push me</a>
        <a class="top" href="#pushOne">Push me</a>
    </div>
    <div class="box">    
        Lorem ipsum dolor.
    </div>
</section> 

<section id="pushTwo" class="slidebox">
    <div class="toggle">
        <a class="bot" href="#">Push me 2</a>
        <a class="top" href="#pushTwo">Push me 2</a>
    </div>
    <div class="box">    
        OTHER CONTENT
    </div>
</section>