Question

我想进入移动视图时做一个简单的下拉，这样我的div就会理解点击下拉信息框。

以下是我的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}
}

我的其他过渡工作正常，我无法弄清楚为什么这不起作用，非常适合任何帮助。

Answer 1

最终使用JQuery切换以在活动状态和隐藏状态之间切换。效果很好。

感谢您的建议！

单击CSS3下拉过渡

1 个答案: