下拉菜单select点击其他元素可以触发下拉

浏览(44) | 2018-01-20 09:37

今天遇见一个问题,前端同学写了个后h5的页面,select下拉菜单的后边跟了一个icon图标,客户反映说,再手机上只点击select才会触发下拉,感觉用户体验不好,需要点击后边的icon图标 也要触发下拉才行,好吧,用户体验好才是王道,那就问度娘,发现一段代码,确实可以,记录一下:

html结构:

<div class="dd_yuding">
				<span>场馆选择</span>
				<select name="changguan" id="changguan" onChange="chselect()">
					<volist name="changguan" id="vo">
						 <option value="{$vo.cat_id}">{$vo.cat_name}</option>
					</volist>
				</select>
				<i class="iconfont icon-xiamiantubiao" id="i_changguan"></i>
			</div>
			<div class="dd_xianpro"></div>
			<div class="dd_yuding">
				<span>场次选择</span>
				<select name="changci" id="changci">
				
				</select>
				<i class="iconfont icon-xiamiantubiao" id="i_changci"></i>
			</div>
			<div class="dd_xianpro"></div>

js代码如下:

$(document).ready(function() {
			   $('#i_changci').click(function() {
				   open($(this).prev('select'));
			   });
			   
			    $('#i_changguan').click(function() {
				   open($(this).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");
			   }
			}

亲测可以实现。

赞(0)评论(0)

评论

js获取网址参数转换为json对象

在使用apicloud或者mui做app开发发的时候,我们需要点击按钮传参,我们通常做一个公用的函数来处理这个问题:var parseQueryString
2018-07-07 09:22浏览(70)
赞(0)评论(0)

apicloud底部tab切换效果

apicloud开发app的时候我们京城会用到底部切换效果,那么如何切换才会做到更加的顺滑呢? 基本的原理就是使用openFrameGroup, 首先看htm
2018-07-07 09:15浏览(80)
赞(0)评论(0)

apicloud关闭状态栏和主体重叠 沉侵式关闭

apicloud默认是开启沉侵式的,也就是说默认生成的app都是状态栏和主体重叠的,有时候我们不需要这种效果,那么如何关闭呢? 其实关闭沉侵式很简单,只需要修
2018-07-07 09:04浏览(71)
赞(0)评论(0)

小程序提示框

开发小程序的时候,我们都遇见一个问题就是,不能alert了,小程序禁用了alert函数, 小程序对应封装了很多自己的提示函数:onShow: function
2018-01-20 11:32浏览(52)
赞(0)评论(0)