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

[Bens2014]

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

[dreamleader_0927]

我不是特别清楚百度的这个功能怎么实现的，但是您要是想要完成这个功能，我可以向您简述一下我的做法。 具体的方法： 1.在本身的页面上使用框架集分割； 2.在您需要进行功能实现的地方继续使用框架集分割成左右两个部分； 3.先设置您的左栏的宽度为零； 4.在剩下的右边的给一个图片，或者一个按钮； 5.编写一个方法 ，方法的功能是当点击的时候使左边的宽度变为您需要的宽度（您需要一个表示状态的变量） 6.每当点击的时候都需要去判断那个状态变量来判断是变宽还是隐藏； 实现起来其实挺简单的，只是需要一点耐心，把您需要实现的功能直接写入左边的栏目中就行了

[杜子寒]

    <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>