jquery hide explanations.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hide explanations</title>

    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $(".ex .hide").click(function () {
                // $(this).parents(".ex").hide("slow");
                // parents, 祖先元素。
                $(this).parents("div").hide("slow");
                // $(this).parents().hide("slow");
            });
        });
    </script>
    <style>
        div.ex {
            background-color: #e5eecc;
            padding: 7px;
            border: solid 1px #c3c3c3;
        }
    </style>
</head>

<body>

<h3>中國辦事處</h3>
<div class="ex">
    <button class="hide" type="button">隱藏</button>
    <p>聯繫人:張先生<br/>
        北三環中路 100 號<br/>
        北京</p>
</div>

<h3>美國辦事處</h3>
<div class="ex">
    <button class="hide" type="button">隱藏</button>
    <p>聯繫人:David<br/>
        第五大街 200 號<br/>
        紐約</p>
</div>

</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章