原生JS如何实现ul部分内容显示与隐藏用

Question

<!-- HTML如下-->
                         <div class="sel">
                                <ul>
                                    <li>深圳<i></i></li>
                                    <li>北京</li>
                                    <li>上海</li>
                                    <li>广州</li>
                                    <li>更多</li>
                                </ul>
                            </div>
<!-- CSS如下-->
 /*城市下拉框*/
.sel {
    height: 30px;
    width: 48px;
    position: relative;
    margin-left:15px;
    font-family: simsun;
}
.sel ul{
    width: 100%;
    position: absolute;
    top:5px;
}
.sel li{
    padding-left: 5px;
    line-height: 20px;
}
.sel li:first-child i{
   display: inline-block;
    width: 8px;
    height: 8px;
    background: url(../Images/creditCard/icon_all.png) no-repeat 0 -1170px;
    margin-left: 5px;
}
.sel li:not(:first-child){
    display: none;}
.hover{
    background: #fff;
    border:1px solid #ddd;
}

Answer 1

$('.sel li:gt(0)').toggle();

Answer 2

楼上别闹，你那个是jquery。display:none;

Answer 3

新增 ul.on li {
        display: block !important;
    }这个样式
<div class="sel">
    <ul>
        <li>深圳<i></i></li>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>更多</li>
    </ul>
</div>
<div class="sel">
    <ul>
        <li>深圳<i></i></li>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>更多</li>
    </ul>
</div>
<script>
    var ul = document.querySelectorAll('div.sel ul');
    for(var i=0;i<ul.length;i++)
        ul[i].onclick = function (e) {
            e = e || window.event;
            var o = e.target || e.srcElement
            if (this.className == 'on') {
                if (o.tagName == 'LI') {
                    var lis = this.getElementsByTagName('li');
                    for (var i = 0; i < lis.length; i++) { lis[i].style.display = 'none'; lis[i].innerHTML = lis[i].innerHTML.replace(/<[^>]+>/g, '') }
                    o.style.display = 'block';
                    o.innerHTML += '<i></i>';
                    this.className = '';
                }
            }
            else this.className = 'on'
        }
</script>