JavaScript+div实现select下拉菜单功能

Xuanmo  发表于: 2016-05-02 23:35:11  分类: 实战案例  1508  0

select的默认样式比较不好看,处理起来也并不是很方便,所以我们可以自己利用其他的标签来做一个,替代select,方法有很多,我的做法欢迎大家指出不好的地方。
    附上源码:


<div id="box">
    <p>请选择 &nbsp;</p>
    <ul class="hide">
        <li>请选择</li>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>HTML5</li>
        <li>CSS3</li>
    </ul>
</div>

js


var oBox = document.getElementById('box');
var oP = oBox.getElementsByTagName('p')[0];
var oSpan = oBox.getElementsByTagName('span')[0];
var oUl = oBox.getElementsByTagName('ul')[0];
var aLi = oBox.getElementsByTagName('li');
var onOff = true;
oP.onclick = function () {
    if (onOff) {
        oUl.className = 'show';
        oSpan.style.transform = 'rotate(180deg)';
        onOff = false;
    } else {
        oUl.className = 'hide';
        oSpan.style.transform = 'rotate(360deg)';
        onOff = true;
    }
}
for (var i = 0; i < aLi.length; i++) {
    aLi[i].index = i;
    aLi[i].onclick = function () {
        onOff = true;
        oP.innerHTML = this.innerHTML;
        oUl.className = 'hide';
        oSpan.style.transform = 'rotate(360deg)';
    }
}

DEMO展示

  • 6人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
demo、select自定义

作者简介:Xuanmo

打赏

生命的意义在于折腾。

共 0 条评论关于 “JavaScript+div实现select下拉菜单功能”