如何实现百度地图的左栏的收缩展开功能

Question

百度地图左栏收缩

Answer 1

    <style>
        #leftBar
        {
            width: 100px;
            height: 500px;
            float: left;
            background-color: blue;
        }        #rightPage
        {
            position: relative;
            margin-left: 100px;
            height: 500px;
        }        .btn_toggleLeft
        {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 20px;
            height: 80px;
            left: 0;
            margin: auto;
            background-color: white;
            cursor: pointer;
        }        .content
        {
            background-color: lightskyblue;
            height: 100%;
        }
    </style>
    <div>
        <div id="leftBar" class="leftBar">
        </div>
        <div id="rightPage" style="">
            <div class="btn_toggleLeft" onclick="test()">
                你点我啊
            </div>
            <div class="content">
            </div>
        </div>
    </div>
    <script>
        function test() {
            var leftBar = document.getElementById("leftBar");
            var content = document.getElementById("rightPage");
            if (leftBar.style.display != "none") {
                leftBar.style.display = "none";
                content.style.marginLeft = 0;
            }
            else {
                leftBar.style.display = "block";
                content.style.marginLeft = "100px";
            }
        }
    </script>