点击而不是页面加载时加载Accordian Panel

Question

I am using a Google Map and Street View javascript code within two panels using Bootstrap Accordian. 我正在使用Bootstrap Accordian在两个面板中使用Google Map和Street View javascript代码。 The first panel contains the map and the second contains the street view. 第一个面板包含地图，第二个面板包含街景。 Currently both panels load their JS code on page load but the second panel is collapsed so only the Map panel is visible. 当前，两个面板均在页面加载时加载其JS代码，但第二个面板已折叠，因此仅“地图”面板可见。

Is it possible to delay the loading of the second panel which contains the street view code until the user clicks to expand/unhide the content rather than loading it all on page load? 是否可以延迟包含街景代码的第二个面板的加载，直到用户单击以展开/取消隐藏内容，而不是全部加载到页面加载中为止？

Thanks 谢谢

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
href="#collapse1">Local Map</a></h4></div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
**Google Map JS**
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
href="#collapse2">Street View</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="pano" style="width: 400px; height: 300px;"></div>
</div>
</div>
</div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion-toggle").on('click',function(){
if($(this).attr('href') =="#collapse2"){
alert('');function initialize() {
var point= new google.maps.LatLng(51.524964,-0.34146399999997357);
var panoramaOptions = {
position: point,
pov: {
heading: 12.399999999999999,
pitch: 6.94
}
};
var panorama = new     
google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
});
});
}
});
});
</script>

Answer 1

you can try something like this: 您可以尝试这样的事情：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Accordion</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
<script>
$(document).ready(function(){
$(".accordion-toggle").on('click',function(){
if($(this).attr('href') =="#collapse2"){
    alert('hi');
    initialize();
}
});
});


function initialize() {
      var fenway = new google.maps.LatLng(42.345573, -71.098326);
      var mapOptions = {
        center: fenway,
        zoom: 14
      };
      var map = new google.maps.Map(
          document.getElementById('map-canvas'), mapOptions);
      var panoramaOptions = {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      };
      var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
      map.setStreetView(panorama);
    }

</script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
href="#collapse1">Local Map</a></h4></div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
**Google Map JS**
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
href="#collapse2">Street View</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
 <div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="width: 400px; height: 300px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

点击而不是页面加载时加载Accordian Panel

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-12-31 10:56:40

点击而不是页面加载时加载Accordian Panel

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-31 10:56:40

解决方案1
1 已采纳 2014-12-31 10:56:40