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>