请问在html中如何点击某元素.而展开一个select
如图所示.现在点击每个单元左侧部分会展开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是否直可以直接实现此效果?
css3 html5 移动web开发 JavaScript zepto
来过这世界
11 years, 8 months ago
Answers
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");
}
}
没事就捏方便面
answered 11 years, 8 months ago