0

我正在尝试创建不同的链接，这些链接在单击时会切换不同的内容：

<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），当您单击不同的部分时，它会触发并向下滑动第一个部分的内容。

为什么会这样？有什么办法可以使列在一行中具有独立和内容？这让我发疯！

非常感谢你。

4

1 回答 1

1

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

工作示例

/* 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>
于 2013-09-27T13:16:51.353 回答