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>

CSS3切换效果，重复，不工作，为什么？

1 个答案: