JS实现的一些css效果

1.左侧缩放后搜索框，地图放大缩小跟着移动。

index.html:

// 监听子页面(vue页面发来的消息)
function hideNav() {
    $("#layerlist").hide();
    $("#showbutton").show();
    $('#map_root #map_zoom_slider')[0].style.left = '60px';
    $('.search_zone', parent.document)[0].style.left = '60px';
}

function showNav() {
    $("#showbutton").hide();
    $("#layerlist").show("normal");
    $('#map_root #map_zoom_slider')[0].style.left = '350px'
    $('.search_zone', parent.document)[0].style.left = '350px'
}

• $(’#map_root #map_zoom_slider’)[0] 是undefined， 为什么效果能实现？？？
  

2. 页面框都可隐藏（图例，更换底图）

（1）图例

 function handleLegend() {
    //console.log($("#legendDiv"), '$("#legendDiv")')
    $("#legendDiv").toggle();
 }
 
<div id="legendTitle" class="legendTitle" onclick="handleLegend();">
    <span class="legendtitle_imgspan"><img class="legendtitle_img" src="../resource/img/double_trangle_down_h.png" /></span>
    <span class="legendtitle_span">图例</span>
</div>
<div id="legendDiv" style="overflow-y:auto; top: 500px !important;">
</div>

（2）更换底图

<div style=" right: 0px;  top: 160px; position: absolute; z-Index: 99; float: right;">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'更换底图', closable:false, open:false">
        <div data-dojo-type="dijit/layout/ContentPane" style="overflow: auto;">
            <div id="basemap"></div>
        </div>
    </div>
</div>