单一按钮显示/隐藏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单一按钮显示/隐藏title>
    <style>
        div {
            margin: 10px auto;
            width: 222px;
            height: 206px;
            border: 1px solid #aaa;
            cursor: pointer;
        }
        .outside {
            height: 43px;
        }
        h2 {
            font-size: 1em;
            border: 1px solid;
            border-color: #fff #e9edf2;
            padding: 10px;
            color: #57646E;
            background: #ced3d7 url(ico.gif) 200px 24px no-repeat;//ico图片位于背景图中,宽为180px,高为24px,并不重复
            display: block;
            margin: 0 0;
        }
         .open {
            background: #ced3d7 url(ico.gif) 200px -5px no-repeat;
        }
        ul {
            font-size: 0.9em;
            padding: 0;
            width: 222px;
            height: 163px;
            margin: 0 0;
            display: block;
        }
        li {
            list-style-type: none;
            height: 25px;
            background: #e9edf2;
            padding: 2px 0 0 10px;
        }
        a {
           color: #6b7980;
           text-decoration: none;
        }

    style>
    <script>
        window.onload = function() {
            var mouseinli = document.getElementsByTagName('li');
            var a = document.getElementsByTagName('a');
            for (var i=0;i<mouseinli.length;i++) {
                mouseinli[i].index = i;
                mouseinli[i].onmouseover = function() {
                    this.style.background = '#ffffff';
                    a[this.index].style.textDecoration = 'underline';
                };
                mouseinli[i].onmouseout = function() {
                    this.style.background = '';
                    a[this.index].style.textDecoration = '';
                };
            }
            var imgChange = document.getElementsByTagName('h2')[0];
            var ulDisplay = document.getElementsByTagName('ul')[0];
            var Divborder = document.getElementsByTagName('div')[0];
            imgChange.onclick = function() {
                ulDisplay.style.display=ulDisplay.style.display == 'none' ? 'block':'none';
                this.className = ulDisplay.style.display == 'none' ? 'open' : '';
                Divborder.className = ulDisplay.style.display == 'none' ? 'outside' : '';
            }
        }

    script>
head>
<body>
     <div>

         <h2 >播放列表...h2>
         <ul>
             <li><a href="javascript:;">玩家之徒 - 蔡依林a>li>
             <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮a>li>
             <li><a href="javascript:;">猜不透 - 丁当a>li>
             <li><a href="javascript:;">自导自演 - 周杰伦a>li>
             <li><a href="javascript:;">浪漫窝 - 弦子a>li>
             <li><a href="javascript:;">流年 - 王菲a>li>
         ul>
     div>
body>
html>

单一按钮显示/隐藏_第1张图片


















你可能感兴趣的:(javascript,HTML,CSS)