分享：鼠标滑过列表展开内容（默认第一行展开）


ul,li{margin:0;padding:0;list-style:none;width:300px;}
li{height:35px;line-height:35px;border:#000 1px solid;cursor:pointer;}
li#one{height:70px;}
<ul>
<li id="one">内容1</li>
<li id="two">内容2</li>
<li id="three">内容3</li>
<li id="four">内容4</li>
<li id="five">内容5</li>
<li id="six">内容6</li>
</ul>
window.onload = function (){
var li = document.getElementsByTagName("li");
for(var i=0; i<li.length; i++){
li[i].onmouseover = function (){
for(var j=0; j<li.length+1; j++){
if(i!=j){
this.style.height = "70px";
li[j].style.height = "35px";
this.style.background = "#f00";
li[j].style.background = "#fff";
}else{
this.style.height = "70px";
this.style.background = "#f00";
}
}
}
}
}
还是新手，不过这个功能感觉还是应用比较广泛的，所以写了一下，还请高手指点

解决方案 »

  1.   

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload=function(){
    holdList(3);
    };

    function expandList(i){ //从下标i开始展开，下标从0开始算，此处从1开始展开
    var list=document.getElementById("list").getElementsByTagName("li");
    list[i].style.visibility ="visible";
    if(i+1<list.length){
    setTimeout(expandList(i+1), 5000);
    }
    }

    function holdList(i){//从下标i开始收缩，下标从0开始算，此处从3开始收缩
    var list=document.getElementById("list").getElementsByTagName("li");
    list[i].style.visibility ="hidden";
    if(i>1){
    setTimeout(holdList(i-1), 5000);
    }
    }

    </script>
    </head>
    <body>
    <div style="height:2000px;">
    <div id="menu" style="border:1px solid black;width:180px;height:100px;background:yellow;position:fixed;left:30px;top:200px;">
    <ul id="list" onmouseover="expandList(1)" onmouseout="holdList(3)">
    <li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li>
    </ul>
    </div>
    </div></body>
    </html>