zoukankan      html  css  js  c++  java
  • jquery菜单伸缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
    <head>
        <title>DL Demo</title>
        <script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
        <script>
        $(document).ready(function(){
            $("dd").hide();
            $("dt").css({cursor:"pointer"});
            $.each($("dt"), function(){
                $(this).click(function(){
                    $("dd").not($(this).next()).hide();
                    $(this).next().toggle(500);
                    //$(this).next().toggle();
                });
            });
        });
        </script>
        <style>
        body { font-family: Arial; font-size: 16px; }
        dl { width: 300px; }
        dl,dd { margin: 0; }
        dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; width: 100%;}
        dt a { color: #FFF; }
        dd a { color: #000; }
        ul { list-style: none; padding: 5px;margin:0; }
        </style>
    </head>
    <body>
    <dl>
        <dt><a href="/">jQuery</a></dt>
        <dd>
            <ul>
                <li><a href="/src/">Download</a></li>
                <li><a href="/docs/">Documentation</a></li>
                <li><a href="/blog/">Blog</a></li>
            </ul>
        </dd>
        <dt><a href="/discuss/">Community</a></dt>
        <dd>
            <ul>
                <li><a href="/discuss/">Mailing List</a></li>
                <li><a href="/tutorials/">Tutorials</a></li>
                <li><a href="/demos/">Demos</a></li>
                <li><a href="/plugins/">Plugins</a></li>
                <li><a href="/plugins/">Plugins</a></li>
                <li><a href="/plugins/">Plugins</a></li>
                <li><a href="/plugins/">Plugins</a></li>
                <li><a href="/plugins/">Plugins</a></li>
                <li><a href="/plugins/">Plugins</a></li>
            </ul>
        </dd>
        <dt><a href="/dev/">Development</a></dt>
        <dd>
            <ul>
                <li><a href="/src/">Source Code</a></li>
                <li><a href="/dev/bugs/">Bug Tracking</a></li>
                <li><a href="/dev/recent/">Recent Changes</a></li>
            </ul>
        </dd>
    </dl>
    </body>
    </html>
  • 相关阅读:
    3.04
    3.03
    3.02
    3.01
    2.27
    2.25小账本6
    2.24小账本5
    2.23小账本4
    2.22小账本3
    git常用命令
  • 原文地址:https://www.cnblogs.com/dingbaiyi/p/5436505.html
Copyright © 2011-2022 走看看