Javascript 小改动后手风琴按钮未关闭（面板）
使用JavaScript。所以，我用两种方法建立了这个模型。尽管我看不出它们之间有什么不同，但一种方式一切都很完美，而另一种方式则不会 我在地图上显示用户选择后的表格。每个新选择填充一个应打开和关闭的新手风琴按钮。这些表是在对GeoServer进行Ajax调用后设置的，因此所有这些都必须是动态的（就像解决方案一样，可以工作，但按钮不会关闭）。它附加了一个计数，以便每次都创建新的面板/表格容器/表格 场景1）我硬编码了工作正常的html。像这样：Javascript 小改动后手风琴按钮未关闭（面板）,javascript,button,accordion,Javascript,Button,Accordion,使用JavaScript。所以，我用两种方法建立了这个模型。尽管我看不出它们之间有什么不同，但一种方式一切都很完美，而另一种方式则不会 我在地图上显示用户选择后的表格。每个新选择填充一个应打开和关闭的新手风琴按钮。这些表是在对GeoServer进行Ajax调用后设置的，因此所有这些都必须是动态的（就像解决方案一样，可以工作，但按钮不会关闭）。它附加了一个计数，以便每次都创建新的面板/表格容器/表格 场景1）我硬编码了工作正常的html。像这样： <div class="contai
<div class="container" id="accordionContainer">
<button class="accordion">Selection 1</button>
<div class="panel" id="panel1">
<div class="container" id="tableContainer">
<table id="featureTable" class="display" width="100%">
<thead></thead><tfoot></tfoot>
</table>
</div>
</div>
</div>
选择1
var btnPart = '<button class="accordion">' + 'Selection ' + tableCount.toString() + ' ' + activeOverlay+ '</button>';
var panelPart = '<div class="panel" id="panel' + panelCount.toString() + '">';
var tabContPart = '<div class="container" id="tableContainer' + tableContainerCount.toString() +'">';
var tablePart = '<table id="featureTable' + tableCount.toString() + '" class="display" width="100%"><thead></thead><tfoot></tfoot></table></div></div></div>';
$('#accordionContainer').append(btnPart, panelPart, tabContPart, tablePart);
var newTable = '#featureTable' + tableCount.toString();
$(newTable).DataTable( {
data: data.features, //get the data under features
columns: columns,
destroy: true
} );
var btnPart=''+'选择'+tableCount.toString（）++''+activeOverlay+''；
var panelPart=''；
var tabContPart=''；
var tablePart=''；
$（“#acordioncontainer”）.append（btnPart、panelPart、tabContPart、tablePart）；
var newTable='#featureTable'+tableCount.toString（）；
$（新表）。数据表（{
data:data.features，//获取features下的数据
列：列，
毁灭：真的
} );
<body>
<div id="map"></div>
<div id="sidebar"></div>
<div class="container" id="accordionContainer"></div>
</body>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
var btnPart = '<button class="accordion">' + 'Selection ' + tableCount.toString() + ' ' + activeOverlay+ '</button>';
var panelPart = '<div class="panel" id="panel' + panelCount.toString() + '">';
var tabContPart = '<div class="container" id="tableContainer' + tableContainerCount.toString() +'">';
var tablePart = '<table id="featureTable' + tableCount.toString() + '" class="display" width="100%"><thead></thead> <tfoot></tfoot></table></div></div></div>';
$('#accordionContainer').append(btnPart, panelPart, tabContPart, tablePart);
var newTable = '#featureTable' + tableCount.toString();
$(newTable).DataTable( {
data: data.features, //get the data under features
columns: columns,
destroy: true
} );
</script>
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i//Document listens for clicks on accordions
$(document).on('click','.accordion',function(){
//Add or Remove the active class on the clicked accordion
$(this).toggleClass('active');
//If the clicked accordionhas the active class, then show the panel
if($(this).hasClass('active')){
$(this).next('.panel').show();
} else { //Otherwise hide the panel
$(this).next('.panel').hide();
}
});
var acc=document.getElementsByClassName（“accordion”）中删除所有内容到btnPart
解释。运行代码时，onclick
所做的是告诉Javascript查找页面上与您的选择匹配的所有元素，并侦听单击。它不会在创建侦听器后查找添加的任何内容。在您的示例中，添加所有内容后，只需将代码向下移动即可。但是首选的方法是使用事件委派，并将侦听器委派给父元素，或者在我的示例中委派给文档本身
我的密码是：
嘿，告诉文档如果它被点击，检查它是否在.accorbian上，以及它是否运行此代码
您的代码显示，找到当前页面上的.accordians，如果他们被单击，则运行此代码
委派的好处是，您可以随时通过ajax或任何方式添加更多元素，侦听器仍然可以工作。打开和关闭项目的javascript代码在哪里。很可能您遇到了侦听器问题。侦听器可以查看加载的元素，也可以使用委派来侦听添加到DOM的元素上的事件。我猜你是用第一种方法做的。此外，您的代码正在使用重复ID创建DOM元素，这是无效的HTML，可能会导致问题。。。所有这些中唯一改变的变量是div内容的生成方式。提前手动或动态发布。发布它以便我们可以看到它，因为最有可能的问题就在这里。使用结构更新帖子。此外，我没有制作重复的DOM元素。有一个计数器在生成时附加到名称。第一个示例只是为了测试我是否可以将表附加到按钮/面板中。下面是一个使用vanialla JS使用事件委派（就像我在）的示例，这样您就可以了解到底发生了什么。还