这是另一个基于jQuery的示例。与此处发布的所有其他答案相反,它考虑了所有键盘和鼠标事件,尤其是单击:
if (!$.support.leadingWhitespace) { // if IE6/7/8 $('select.wide') .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); }) .bind('click', function() { $(this).toggleClass('clicked'); }) .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }}) .bind('blur', function() { $(this).removeClass('expand clicked'); });}
结合使用这段CSS:
select { width: 150px; }select.expand { width: auto;}
您需要做的就是将类添加
wide到有问题的下拉元素中。
<select > ...</select>
这是一个jsfiddle示例。希望这可以帮助。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)