下拉列表：纯CSS实现+JS实现

时间：2021-07-13 10:11:58

　　嗯……本着实践方能理解的思想，也为之后用的时候方便，做了下下拉列表的实现，果然动手才是真理啊！

HTML部分

　　没有什么好说的，直接上代码吧：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="sheet.css">
    <title>下拉列表</title>
</head>
<body>
  <div class="main">
    <ul>
        <li>
            <a href="">animal</a>
            <ul>
                <li><a href="">dog</a></li>
                <li><a href="">cat</a></li>
                <li><a href="">fox</a></li>
            </ul>
        </li>          
        <li>
            <a href="">human</a>
            <ul>
                <li><a href="">man</a></li>
                <li><a href="">woman</a></li>
            </ul>
        </li>     
        <li>
            <a href="">flower</a>
            <ul>
                <li><a href="">tulip</a></li>
                <li><a href="">rose</a></li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript" src="downul.js"></script>
  </div>
</body>
</html>

下拉列表：纯CSS实现+JS实现

CSS实现

　　单纯的HTML代码还是比较单调的，首先对其样式进行修改，至少……能看得下去。

.main{
    width:400px;
    margin:100px auto;
}
.main ul li{
    list-style:none;
}
.main ul li a{
    display:block;
    width:100%;
    height:40px;
    background:#999;
    font:20px/40px "";
    text-align:center;
    color:#fff;
    margin-bottom:5px;
    text-decoration:none;
}

.main ul li a:hover{
background:#666;
border-bottom:1px dashed #FF0000;
}

　　这样下来之后，效果图就变成了：

下拉列表：纯CSS实现+JS实现

　　之后，我们先将二级列表进行隐藏：

.main ul li ul{
    display:none;
}

　　这样的效果就是：

下拉列表：纯CSS实现+JS实现

　　可以看到，二级列表已经不显示了，我们达成了初步想法。那么，接下来，要实现下拉列表，即，当鼠标放在相应一级列表栏时，其对应的二级列表会显现。得知了需求，那样就好办了，一个简单的hover就可以了：

.main ul li:hover ul{
    display:block;
}

　　这样，CSS的效果实现就完成了。

JS实现

　　这个要比CSS稍微麻烦一点，需要用到函数了嘛，那么，先用CSS把模样做好，然后，隐藏与显示用JS实现。

　　JS代码就直接写下啦：

function showUl(li){
    var subMenu=li.getElementsByTagName("ul")[0];
    subMenu.style.display="block";    
}
function hiddenUl(li){
    var subMenu=li.getElementsByTagName("ul")[0];
    subMenu.style.display="none";    
}

　　两个函数，一个用于显示，一个用于隐藏。

　　接下来，在一级列表的<li>标签里写下调用函数的语句就行啦：

　　

<li onMouseOver="showUl(this)" onMouseOut="hiddenUl(this)">

　　这样达到的效果，和CSS的是一样的。

标签：

相关文章