jQuery实现点击按钮展开和收起

最新推荐文章于 2023-04-10 10:58:21 发布

weixin_30817749

最新推荐文章于 2023-04-10 10:58:21 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guangzhou11/p/7658295.html

版权

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉与收起</title>
		<link rel="stylesheet" href="css/showhide.css" />
		
		<script type="text/javascript" src="js/showhide.js" ></script>
	</head>
	<body>
		<div id="showhide">
			<p>假如生活欺骗了你</p>
			<p>不要悲伤，不要哭泣</p>
			<p>忧郁的日子总会过去的</p>
			<div id="show" style="display:none;">
				<p>
					因为你要知道，再挣扎也是没用的，它还是会再欺骗你一次
				</p>
				
				<p>
				直至你在失望与孤独中死去
				</p>
			</div>
			
		</div>
		 <p class="slide">
            <a href="javascript:showdiv();"  id="strHref"   class="btn-slide">更多选项+
            </a>
		 </p>


	</body>
</html>

　　css

 body
        {
            margin: 0 auto;
            padding: 0;
        }
        a:focus
        {
            outline: none;
        }
        #showhide
        {
            background: black;
            color: white;
            width: 600px;
            display: block;
            margin: 0 auto;
            padding: 5px;
            font-size: 20px;
            
            height: auto;
            font-family: "微软雅黑";
        }
        .slide
        {
            margin: 0;
            padding: 0;
            width: 600px;
            border-top: solid 4px gray;
            margin: 0 auto;
        }
       .btn-slide
        {
            background: gray;
            text-align: center;
            width: 120px;
            height: 30px;
            padding: 10px 10px 0 0;
            margin: 0 auto;
            display: block;
            color: #fff;
            text-decoration: none;
        }

 $(document).ready(function () {
            $(".btn-slide").click(function () {
                $("#show").slideToggle();
            });
        });

　　效果；

2017-11-02 09:56:57

转载于:https://www.cnblogs.com/guangzhou11/p/7658295.html

weixin_30817749

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现点击按钮展开和收起

html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>下拉与收起</title> <link rel="stylesheet" href="css/showhide.css" /> <s...
复制链接

扫一扫