请问在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, 9 months ago

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, 9 months ago

Your Answer