原生态js展开收缩 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        body{max-width: 640px; margin: 0 auto; background-color: #ddd;}
        a{text-decoration: none; color: #333;}
        .public_header{ height: 40px; line-height: 40px; border-bottom:1px solid #ebebeb; position: relative; background-color: #fff; }
        .ph_icon_menu{ position: absolute; right: 0;top:0;width: 40px; height: 40px; display: block;}
        .ph_icon_menu i{display: block;border-color:#f60;border-width:3px 0;border-style: solid;width: 20px;height:11px;margin:11px auto 0;position: relative;}
        .ph_icon_menu i:before{content: "";position: absolute;left:0;top:4px;width: 20px;height:3px;background-color:#f60;}
        .nav{ background-color: #fff; overflow: hidden; display: none; }
        .nav a{ width: 25%; float: left; display: block; height: 30px; line-height: 30px; box-sizing: border-box; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; text-align: center; font-weight: 700; font-size: 14px;}
        .red{ color: red;  text-align: center; margin-top: 150px; }
    </style>
</head>
<body>
<div class="public_header"><a href="javascript:;" class="ph_icon_menu"  onclick="menuShowHide();"><i></i></a></div>
<div class="nav" id="J_menu_content">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
</div>
<script type="text/javascript">
    //第一种写法
    // var obj = document.getElementById("J_menu_content");
    // function menuShowHide() {
    //     if (obj.style.display == "block") {
    //         obj.style.display = "none";
    //     }else{
    //         obj.style.display ="block";
    //     }
    // }
    //第二种写法
    var type = 1;
    var obj = document.getElementById('J_menu_content');
    function menuShowHide() {
        if (type) {
            obj.style.display="block";
            type = 0;
        }else {
            obj.style.display="none";
            type = 1;
        }
    }
</script>

<p class="red">注意：a标签要加上javascript:;才可以点击出效果</p>


    
</body>
</html>

效果如图：

展开后：

 

如果文章中有不对之处，随时欢迎您的纠正~~ 

 

posted @ 2017-02-28 15:34  前端HL  阅读(223)  评论(0)  编辑  收藏  举报