如图所示.现在点击每个单元左侧部分会展开selec.而点击右侧蓝色区域是无任何效果的.
dom结构大概如此
<div class="item"> <select name="" id="x"> <option value="">----</option> <option value="1">12</option> </select> <label for="x"><i>日</i></label></div>label配合input可以做到点击label的时候.相对应的input会获得焦点.
但label跟select配合似乎是无效的.
现使用zepto做移动开发.
如何在点击/触击<i>标签的时候.让对应的select展开呢?
或者是我实现方式有问题?css3是否直可以直接实现此效果?
解决方案
select和input的file标签可以说是html最不人性化的标签了，推荐你不要使用原生的select标签，推荐你个http://silviomoreto.github.io/bootstrap-select/，看了你的问题，我第一反应是trigger：
$('i').click(function(){//没仔细专研过过zepto，但jquery和zepto差不多，你用可用zepto触摸事件代替'click' $(this).parents('label').prev('select').trigger('click');})结果成功的失败了。
然后我尝试了
$('i').click(function(){ $(this).parents('label').prev('select').click(); })结果又成功的失败了
然后我尝试改变了它的size：
$('i').click(function(){ $(this).parents('label').prev('select').attr('size',2); })效果能实现了
但是样式很丑，你也可以看看老外的http://jsfiddle.net/g3Ta3/4/
其实，我们也可以把下拉里的option的值wrap在一个div里，然后找出当前的select的offset.left和offset.top,然后append到select的后面，这只是一个模拟select的思路而已。这样做的好处可以自定义select的样式
下面给出正确的答案，修改一下扣来的老外的答案：
$(document).ready(function() { $('i').click(function() { open($(this).parents('label').prev('select')); });});function open(elem) { if (document.createEvent) { var e = document.createEvent("MouseEvents"); e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); elem[0].dispatchEvent(e); } else if (element.fireEvent) { elem[0].fireEvent("onmousedown"); }}