javascript - Twitter Bootstrap 中的滑动侧面板 z-index 问题

Question

我正在尝试为 Google map 构建一个滑动侧面板，但遇到了让 slider 显示在 map 上同时保持 map 可点击的问题。

我能够让面板显示的唯一方法是将 map 的 Z-index 设置为负数，这使得它不可点击。如何让面板在 map 上滑出，同时保持 map 的交互性？

I've created a JSFiddle here where you can see the problem.

HTML:

<div class="container-fluid">
    <div id="slide-panel">
        <a href="#" class="btn btn-lg btn-primary" id="opener"><i class="glyphicon glyphicon-search"></i> Search</a>

        <div style="overflow-y:auto; max-height:100%; padding:10px;">
            <h3>Search</h3>     
        </div>      
    </div>

    <div id="map">
    </div>

</div>

CSS:

#slide-panel {
    width:300px;
    max-width:100vw;
    height:100vh;
    padding:0px;
    background:#fff;
    margin-left:-310px;
}
#opener {
   float:right;
   margin:75vh -80px 0px 0px;
    -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#map {
    position:absolute;
    top:0px;
    left:0px;
    width: 100vw;
    height: 100vh;
    z-index:-1;
}

JS:

$('#opener').on('click', function() {       
        var panel = $('#slide-panel');
        if (panel.hasClass("visible")) {
            panel.removeClass('visible').animate({'margin-left':'-300px'}); } else {
            panel.addClass('visible').animate({'margin-left':'0px'});
        }   
        return false;   
});

Answer 1

这是工作 fiddle 链接

CSS 的变化

#slide-panel {
    width:300px;
    max-width:100vw;
    height:100vh;
    padding:0px;
    background:#fff;
   position: relative; /*changes done */ 
   z-index: 999; /*changes done */ 
    margin-left: -315px; /*changes done */ 
}
#opener {
  /*  float:right; 
   margin:75vh -80px 0px 0px; */ /*changes done */ 
    -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    z-index: 999; /*changes done */ 
position: absolute; /*changes done */ 
/* left: 0; */
bottom: 50px; /*changes done */ 
right: -80px; /*changes done */ 
}

#map {
    position:absolute;
    top:0px;
    left:0px;
    width: 100vw;
    height: 100vh;
    /* z-index:-1; */ /*changes done */ 
}

Javascript 的变化

$('#opener').on('click', function() {       
        var panel = $('#slide-panel');
        if (panel.hasClass("visible")) {
            panel.removeClass('visible').animate({'margin-left':'-315px'});}else { 
            panel.addClass('visible').animate({'margin-left':'-20px'});
        }   
        return false;   
});

Working Fiddle