我花了很长时间尝试将 select 重写为 ul li 并相应地设置其样式。但我对代码的重量和途中的小烦恼感到非常恼火。
所以我想完全放弃这个想法,只使用普通的 ul li 菜单和某种 javascript 来使其功能像 select (用于表单提交等)。
那么这可能吗?你能给我任何示例代码吗?
我担心的是跨浏览器兼容性。
好主意。我刚刚在小提琴上做了一个,检查一下here http://jsfiddle.net/Starx/a6NJk/2/.
HTML
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>
脚本语言
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').toggle();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.toggle();
});
CSS
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)