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下拉转换点击

回答

相关问题