码迷,mamicode.com
首页 > Web开发 > 详细

JQuery显示隐藏(学习他人方法后)

时间:2017-07-16 00:05:10      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:doc   body   document   http   func   logs   slide   display   技术   

 

主要用到了JQuery的slideToggle() 方法

slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。

如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

代码及效果如图所示(其中div和p标签的位置不同效果不同)

 

<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>     (引用)
    <style>
        div.cambridge,
        p.MyShow {
            margin: 0px;
            padding: 5px;
            background: #e5eecc;
            border: solid 1px #c3c3c3;
            position: absolute;
            left: 100px;
            top: 50px;
        }
        
        div.cambridge {
            height: 300px;
            width: 500px;
            display: none;
        }
    </style>

</head>

<body>
 
    <div class="cambridge">
        <br><br>
        <p>寻梦?撑一支长篙,<br>   向青草更青处漫溯;
            <br> 满载一船星辉,
            <br>  在星辉斑斓里放歌。
            <br> <br> 但我不能放歌,
            <br>   悄悄是别离的笙箫;
            <br> 夏虫也为我沉默,<br>  沉默是今晚的康桥!
            <br>
        </p>
    </div>

    <p class="MyShow">再别康桥</p>

</body>

<script type="text/javascript">
    $(document).ready(function() {
        $(".MyShow").click(function() {
            $(".cambridge").slideToggle("slow");
        });
    });
</script>
 
技术分享

 

技术分享

位置改变后

<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
    <style>
        div.cambridge,
        p.MyShow {
            margin: 0px;
            padding: 5px;
            background: #e5eecc;
            border: solid 1px #c3c3c3;
            position: absolute;
            left: 100px;
            top: 50px;
        }
        
        div.cambridge {
            height: 300px;
            width: 500px;
            display: none;
        }
    </style>

</head>

<body>

    <p class="MyShow">再别康桥</p>

    <div class="cambridge">
        <br><br>
        <p>寻梦?撑一支长篙,<br>   向青草更青处漫溯;
            <br> 满载一船星辉,
            <br>  在星辉斑斓里放歌。
            <br> <br> 但我不能放歌,
            <br>   悄悄是别离的笙箫;
            <br> 夏虫也为我沉默,<br>  沉默是今晚的康桥!
            <br>
        </p>
    </div>

    <!--<p class="MyShow">再别康桥</p>-->

</body>

<script type="text/javascript">
    $(document).ready(function() {
        $(".MyShow").click(function() {
            $(".cambridge").slideToggle("slow");
        });
    });
</script>

技术分享

 

JQuery显示隐藏(学习他人方法后)

标签:doc   body   document   http   func   logs   slide   display   技术   

原文地址:http://www.cnblogs.com/ZDZ-3/p/7187842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!