首页 > 其他 > 详细

作品第二课----点击切换显示隐藏

时间:2015-12-23 22:33:50      阅读:209      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .clk { padding-left: 47%; }
    .dis { margin: 1% 47%; display: inline-block; border: 1px solid #000; width: 5%; }
    ul{ list-style: none; padding-left: 0; margin: 0;}
    li { margin-top: 6px; }
    li:hover { background-color: yellow; }
    a { text-decoration: none; }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>
    <div class="clk">
        <button>点击切换</button>
    </div>
    <div class="dis">
        <ul>
            <li><a href="javascript:;">搜狗</a></li>
            <li><a href="javascript:;">百度</a></li>
            <li class="close"><a href="javascript:;">关闭</a></li>
        </ul>
    </div>
    
    <script>
    $(".clk").on("click", function(){
        $(".dis").toggle()
    }); 
    $(".close").on("click", function(){
        $(this).parents("div").hide();
    })

    </script>
</body>
</html>

 

作品第二课----点击切换显示隐藏

原文:http://www.cnblogs.com/samtrybest/p/5071454.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!