07.31《jQuery》——5.1div的隐藏和显示

在这里，用了两者方法达到了预期效果，第一种是通过click事件，通过鼠标点击H5标签来达到隐藏和显示。

另一种是通过鼠标的悬停来达到展开div的目的，当鼠标离开悬停区域就失去了效果，开始默认隐藏div。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            
            body {
                font-size: 13px;
                line-height: 130%;
                padding: 60px;
            }
            
            #panel {
                width: 300px;
                border: 1px solid #0050D0;
            }
            
            .head {
                padding: 5px;
                background: #96E555;
                cursor: pointer;
            }
            
            .content {
                padding: 10px;
                text-indent: 2em;
                border-top: 1px solid #0050D0;
                display: none;
                
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script type="text/javascript">
//             点击h5标签可以展开下面div标签的内容
            $(function(){
                $("div>h5").bind("click",function(){
                    var $div = $(this).next();
                    if($div.is(":visible")){
                        $div.hide();
                    }else{
                        $div.show();
                    }
                });
            });
//             鼠标悬停就展开，离开就收起
//            $(function(){
//                $("#panel").bind("mouseover",function(){
//                    $(this).find("div.content").show();
//                });
//                $("#panel").bind("mouseout",function(){
//                    $(this).find("div.content").hide();
//                });
//            });

            
            
        </script>
    </head>
    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>

    </body>
</html>

ps：第二种方法被注释了

07.31《jQuery》——5.1div的隐藏和显示

猜你喜欢