QQ的基於CSS+DIV製作的下拉可摺疊菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="www.w3.org/1999/xhtml">
    <head>
    <title>仿QQ的下拉摺疊菜單 站長學院www.pigzz.com</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <style type="text/css">
    body {font-size: 76%}
    #list {width: 250px; border-top: 1px solid #000}
    #list dt {text-align: center; font-weight: bold; color: #779; padding: 5px; cursor: pointer; background: #cce; border-width: 0 1px 1px 1px; border-color: #333; border-style: solid}
    #list dd {margin-left: 0; display: none; padding: 20px; border-width: 0 1px 1px 1px; border-color: #333; border-style: solid}
    #list dd.vis {display: block}
    h2 {font-weight: bold; font-size: 1.2em}
    p {margin-left: 15px; color: #666}
    </style>
    <script type="text/javascript">
    function all (arr, func)
    {
    for (var i=0,a; a = arr [i]; i++)
    {
    func (a);
    }
    }
    function show (event)
    {
    var e = event || window.event;
    var src = e.srcElement || e.target;
    defins = document.getElementById ('list').getElementsByTagName ('dd');
    all (defins, function (d) {if (d.className != '') {d.className = '';}});
    nextSib = src.nextSibling;
    while (nextSib.nodeType != 1)
    {
    nextSib = nextSib.nextSibling;
    }
    nextSib.className = 'vis';
    }
    function init ()
    {
    titles = document.getElementById ('list').getElementsByTagName ('dt');
    all (titles, function (t) {t.onclick = show});
    }
    window.onload = init;
    </script>
    </head>
    <body id="summery_070825">
    <dl id="list">
    <dt>星期一</dt>
    <dd class="vis">
    <h2>星期一開始了</h2>
    <p>忙碌的一週又開始了,朋友你準備好了嗎?</p>
    </dd>
    <dt>星期二</dt>
    <dd>
    <h2>星期二怎麼樣呢?</h2>
    <p>是不是開始放鬆自己了呢?</p>
    </dd>
    <dt>星期三</dt>
    <dd>
    <h2>聽人說:</h2>
    <p>過了星期三,一天快一天!!</p>
    </dd>
    <dt>星期四</dt>
    <dd>
    <h2>研究一下AJAX</h2>
    <p>準備把網站加入AJAX</p>
    </dd>
    <dt>星期五</dt>
    <dd>
    <h2>明天就要解放了!</h2>
    <p>真是高興,可以和老婆在一起了!期盼啊……。</p>
    </dd>
    </dl>
    </body>
    </html>

 

 

 

原文出處http://www.pigzz.com/201101/010RN62011.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章