怎么用纯css实现点击出现下拉框，抽屉效果那种

Posted 2023-04-24

用js的话很简单，但是做一道题是让用纯css，想不出来，css点击只有a标签的visited伪类，但是visited加不了动画，急

/* CSS部分 */
ul  list-style:none; margin:0; padding:0; text-align:center; background:#F03; color:#FFF; -webkit-transform:scaleY(0); -webkit-transform-origin:0 0; 
li  padding:0; margin:0; 
div  width:200px; 
div:hover ul  -webkit-animation:ulShow 0.4s; -webkit-animation-fill-mode:forwards; -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1); 
div div  height:30px; line-height:30px; text-align:center; background-color:#FC0; 
@-webkit-keyframes ulShow 
from  -webkit-transform:scaleY(0); 
to  -webkit-transform:scaleY(1); 

<!-- html部分 -->
<div>
<div>下拉 </div>
<ul>
     <li>第一个</li>
     <li>第二个</li>
     <li>第三个</li>
    </ul>
</div>

本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-
”，IE系列比较复杂在此不予举例详情请查询W3C。

追问

这个是hover啊，不是模拟click，不过从你的代码里学到了transform的origin用法，还有animation-fill-mode的用法，谢谢你。
我现在有点怀疑题目只是让hover模拟了，click实在想不出来办法，可惜看不到题目了

追答/* CSS部分 */
ul  list-style:none; margin:0; padding:0; text-align:center; background:#F03; color:#FFF; -webkit-transform:scaleY(0); -webkit-transform-origin:0 0; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0,0.8,0.9,1); 
li  padding:0; margin:0; 
div  width:200px; 
div button:focus~ul  -webkit-transform:scaleY(1); 
div button  width:200px; border:none; height:30px; line-height:30px; text-align:center; background-color:#FC0; 

<!-- HTML部分 -->
<div>
<button>下拉</button>
<ul>
     <li>第一个</li>
     <li>第二个</li>
     <li>第三个</li>
    </ul>
</div>

修改版……

有个缺点，由于是focus获得焦点，所以当点击LI中的内容时button会失去焦点，导致ul消失，暂时来讲没有想到其他解决方法，太晚了睡觉了。

参考技术A 给大家个思路，用input[checkbox]来模拟点击效果 选中会出现checked属性 这个是可以写进css里的 用input:checked来模拟已被点击。 参考技术B 这。。。想多了吧，用 input 多选下拉框不行吗？追问

这是考题啊，我也没得办法

追答

input 下拉框也是纯 CSS 啊，你要做的只是模仿下拉选单的效果而已，:visited 伪类不行的，链接只要点击过就马上是 :visited 的状态而且会一直保持，刷新页面也没用了，那样的话菜单就回不到正常状态了，所以 input 是最好的选择，我以前也见过有人这么干

提问：怎样实现点击一个按钮弹出下拉列表

用css把按钮弄成下列表的样式，用一个事件，按下时，调用一个显示div的样式，div里面，是一个真正的下拉框。。。div弹出时设置位置时，盖住按钮即可。 参考技术A 参考代码如下：
设置PopupMenu属性：AutoPopup为false，TrackButton为tbLeftButton
自定义方法
void TfrmBrand::BtnPopup(TBitBtn *BitBtnOne,TPopupMenu *PopupMenuOne)

TPoint t1,t2;
t1.x=0;
t1.y=BitBtnOne->Height;
t2=BitBtnOne->ClientToScreen(t1);
PopupMenuOne->Popup(t2.x,t2.y);

点击bitEdit按钮弹出菜单
void __fastcall TfrmBrand::bitEditClick(TObject *Sender)

BtnPopup(bitEdit,PopupMenu1);