Javascript OpenLayers 3引导程序手风琴不工作

我对Openlayers非常陌生！我想用手风琴表创建一个自定义控件。问题是，当我单击controldiv时，它并没有按预期工作。如果我将div移到map之外，它就可以正常工作

我添加了下面的代码片段来说明这个问题

window.app={}；
var-app=window.app；
//自定义控件
app.WeatherControl=功能（选项）{
var options=opt_options | |{}；
//气象层
var weatherUI=document.createElement（'div'）；
weatherUI.style.cursor='pointer'；
weatherUI.style.textAlign='center'；
weatherUI.className='weatherUI ol unselectable ol control'；
weatherUI.id='weatherlayerid'；
weatherUI.title='请选择天气层'；
var weatherText=document.createElement（'div'）；
weatherText.innerHTML='天气层公共风气流风倒流阵风气温表面压力降水量（S）波高海洋波浪方向波浪周期涌浪方向井周期当前SEA温度冰覆盖厚度时间当前6H12H 24h36h48h60h72h波弗特尺度0 1 2 3 4 5 6 7 8 9 10 11 12阵风-波弗特尺度0 1 2 3 4 5 6 8 9 10 11 12 14 15 16 17降水尺度-毫米/小时0 0.1 0.4 0.7 1 2 4 7 10 10 40 70波浪和涌浪高度（m）0.5 1.5 2 3 4 6 7 8 9 10 11 12 13 14 15 17 18 19 20波浪和涌浪周期0 2 4 6 10 12 16 18 20 22 24 26 28 30洋流（kn）0.2 0.5 1 1.5 2 2.5 3 4 6 7 8冰覆盖率（%）0 1 10 20 40 50 70 80 90’；
weatherUI.appendChild（weatherText）；
$（“div”）。在（“单击”上，输入[id=“wind_stream”]”，函数（）{
$（“#graph windbaufort”）.toggle（选中此项）；
});
$（“div”）。在（“单击”上，输入[id=“wind_barb”]”，函数（）{
$（“#graph windbaufort”）.toggle（选中此项）；
});
$（“div”）。在（“单击”上，输入[id=“gust”]”，函数（）{
$（“#graph windgust”）.toggle（选中此项）；
});
$（“div”）。在（“单击”上，输入[id=“降水量”着色“]”，函数（）{
$（“#图形沉淀”）.toggle（选中此项）；
});
$（“div”）。在（“单击”，输入[id=“主波高度方向”），函数（）{
$（“#图形波高”）。切换（选中此项）；
});
$（“div”）。在（“单击”，“输入[id=”膨胀高度\方向“]”上，函数（）{
$（“#图形波高”）。切换（选中此项）；
});
$（“div”）。在（“单击”，输入[id=“主波周期”），函数（）{
$（“#图形波动周期”）.toggle（选中此项）；
});
$（“div”）。在（“单击”，“输入[id=”膨胀周期“]”上，函数（）{
$（“#图形波动周期”）.toggle（选中此项）；
});
$（“div”）。在（“单击”上，输入[id=“海平面流”]”，函数（）{
$（“#图形电流”）.toggle（选中此项）；
});
$（“div”）。在（“单击”，“输入[id=”海冰覆盖范围“]”上，函数（）{
$（“#graph icecover”）.toggle（选中此项）；
});
$（“div”）。在（“单击”按钮上，“weatherlayers输入：收音机”，功能（e）{
map.overlyMapTypes.clear（）；
var ly=$（“#weatherlayers输入[type='checkbox']：选中”）；
$。每个（ly，函数（i，val）{
更新层（val）；
})
});
$（“div”）。在功能（e）中的（“单击”，“天气图层输入：复选框”）{
更新人员（本）；
});
控制员，控制员，呼叫（这个{
元素：weatherUI，
target:options.target
});
};
ol.继承（app.WeatherControl，ol.control.control）；
var oSM=新的ol.layer.Tile({
来源：new ol.source.OSM({
交叉原点：空，
url:'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
变量层=[
oSM
];
var map=新ol.map({
控件：ol.control.defaults（）.extend([
新的app.WeatherControl（）
]),
层：层，
目标：“地图”，
视图：新ol.view({
中心：Lonlat的其他项目（[-5.3525700，36.1447400]），
缩放：6
})
});
.map{
高度：400px；
宽度：100%；
}
.ol zoom{
左：未设置！重要；
对：.5em！重要；
顶部：未设置！重要；
底部：.5em！重要；
}
.ol归属{
左：.5em！重要；
右：未设置！重要；
}
/*自定义控件*/
韦瑟瑞先生{
顶部：25px！重要；
左：.5em；
}
.ol touch.weatherui{
顶部：30px！重要；
}
我通过添加以下行解决了问题

$('[data-toggle="collapse"]', weatherText).click(function (e) { e.preventDefault(); $('#accordion').toggle() });

它需要一个有趣的点击事件