Question

我有一个传单地图和2个带有一些内容的div部分。

<body>      
    <div class="row showEquipmentDetails" style="margin:10px;">
        <button type="button" class="btn btn-primary" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
    </div>
    <div class="EquipmentContent row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">  
            <section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
                <label class="equipmentHeaderlable">Name</label>
                <label class="equipmentHeaderValues">SSS</label>
            </section>  
            <section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
                <label class="equipmentHeaderlable">Speed</label>
                <label class="equipmentHeaderValues">SSS</label>
            </section>                  
            <section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
                <button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
            </section>
        </div>
    </div>
    <div id="map">  
    </div>
</body>

<script>
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
</script>

我正在隐藏并显示2 div部分，它放在地图的外侧。但我需要隐藏并在地图上方显示它，所以我这样写了

<div id="map">  
    <div class="row" style="margin:10px;">
        <button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
    </div>
    <div class="EquipmentContent row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">  
            <section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
                <label class="equipmentHeaderlable">Name</label>
                <label class="equipmentHeaderValues">SSS</label>
            </section>  
            <section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
                <label class="equipmentHeaderlable">Speed</label>
                <label class="equipmentHeaderValues">SSS</label>
            </section>                  
            <section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
                <button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
            </section>
        </div>
    </div>  
</div>

但点击事件无法在地图上运行。当我点击第一个按钮时，地图会变焦。单击事件不会被触发。为什么？我怎么能实现呢？有什么建议吗？谢谢！

Answer 1

地图没有加载给我。但请检查此解决方案是否适合您，

＆＃13;

var mymap = L.map('map').setView([51.505, -0.09], 13);



$('.EquipmentContent').hide();


function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}

function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}

＆＃13;

#container {
  width: 650px;
  height: 350px;
  position:relative
}
#map { 
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
 }

 
.EquipmentContent { 
  width: 90%;
  height: 90%;
  position: absolute;
  top:8px;
  left: 45px;
 }
 
 .showEquipmentDetails { 
  width: 40px;
  height: 40px;
  position: absolute;
  top:8px;
  left: 45px
 }
 
 #EquipmentContent {
  z-index: 10;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
   
   
<div id="container">
    <div id="map"></div>
    <div class="EquipmentContent row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style=";background:#dff0ff;">  
            <section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
                <label class="equipmentHeaderlable">Name</label>
                <label class="equipmentHeaderValues">SSS</label>
            </section>  
            <section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
                <label class="equipmentHeaderlable">Speed</label>
                <label class="equipmentHeaderValues">SSS</label>
            </section>                  
            <section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
                <button type="button" style="display: inline-block;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
            </section>
        </div>
    </div>
    <button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" ><i class="fa fa-bars"></i></button>
    
</div>

＆＃13;

Answer 2

得到解决方案。
通过添加以下样式，我得到了预期的结果

.showEquipmentDetails,.EquipmentContent{
position:absolute;
z-index:9;
width:98%;
}

单击在地图上方不起作用的事件

2 个答案: