CSS3下拉轉換點擊

-1

我打算在進入移動視圖時進行簡單的下拉，以便我的div理解點擊以下拉信息框。CSS3下拉轉換點擊

這裏是我的HTML是什麼樣子：

   <div class="ben-item col-md-3 col-xs-6"> 
        <div class="ben-item-cover text-center"> 
         <h3>Some text</h3> 
        </div> 
        <div class="ben-item-content text-center"> 
         <p>A drop down div which shows this description</p> 
        </div> 
       </div> 

       <div class="ben-item col-md-3 col-xs-6"> 
        <div class="ben-item-cover text-center"> 
         <h3>Some text</h3> 
        </div> 
        <div class="ben-item-content text-center"> 
         <p>A drop down div which shows this description</p> 
        </div> 
       </div>

這裏是CSS：

@media (max-width:480px){ 
.ben-item{width:100%;padding-right:0;padding-left:0;height:auto;margin-bottom:5px;overflow:visible} 
.ben-item .ben-item-cover{padding:0;height:50px;line-height:50px;cursor:pointer} 
.ben-item .ben-item-cover i {font-size:16px;float:left;margin:0 0 0 15px;line-height:50px} 
.ben-item .ben-item-cover h3{margin:0 0 0 10px;font-size:19px;line-height:50px;float:left} 
.ben-item .ben-item-content{height:0;padding:0 15px;overflow:hidden} 
.ben-item .ben-item-content h3{margin-top:40px} 
.ben-item .ben-item-content p{font-size:16px} 
.ben-item.active>.ben-item-content,.ben-item.active>.ben-item-cover,.ben-item:hover>.ben-item-content,.ben-item:hover>.ben-item-cover{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 
.ben-item.active>.ben-item-content{height:234px} 
}

我的其他過渡做工精細，我只是不明白爲什麼這是不工作，對任何幫助都很有幫助。

來源

2014-12-03 Louis Anderson

wheres「click」js – Roi 2014-12-03 12:00:46

我在懸停時使用了其他div上的轉換，並且在沒有js的情況下運行正常。我確實需要JS嗎？ – 2014-12-03 12:41:01

我的意思是你提到「點擊」 – Roi 2014-12-03 12:42:03

最終使用jQuery切換在活動狀態和隱藏狀態之間切換。完美的作品。

感謝您的建議！

來源

2014-12-03 16:53:43

CSS3下拉轉換點擊

回答

相關問題