Question

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

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

Answer 1

/* 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消失，暂时来讲没有想到其他解决方法，太晚了睡觉了。

Answer 2

给大家个思路，用input[checkbox]来模拟点击效果 选中会出现checked属性 这个是可以写进css里的 用input:checked来模拟已被点击。

Answer 3

这。。。想多了吧，用 input 多选下拉框不行吗？

追问

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

追答

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