个人中心
gpt4 book ai didi

javascript - 小幅更改后 Accordion 按钮未关闭(面板)

转载 作者：行者123 更新时间：2023-12-03 03:49:06 25 4
gpt4 key购买 nike

使用 JavaScript。因此，我通过两种方式进行了设置。一种方式一切正常，另一种则不然，尽管事实上我看不出它们之间有什么区别。

我在 map 上进行用户选择后显示表格。每个新选择都会填充一个应打开和关闭的新 Accordion 按钮。这些表是在对 GeoServer 进行 Ajax 调用后设置的，因此所有这些都必须是动态的(就像可以工作但按钮不关闭的解决方案)。它附加了一个计数，以便每次都会创建新的面板/表格容器/表格。

场景 1) 我对 html 进行了硬编码，效果很好。像这样:

    <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>

我在正文部分设置了 6 或 7 个(头部部分也可以)并对计数进行硬编码(如上面的 panel1)。效果很好。用户选择 map 区域，其功能将显示在 Accordion 按钮中。但我不能对任何东西进行硬编码。选择/表格的数量不需要限制。

这让我想到:

场景 2) 一切都是在每次 Ajax 请求后动态设置的。这可行，但按钮不会关闭。它们是开放的并显示所有的 table 。 

    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
                                } );

我看不出提前对 DOM 进行硬编码或动态设置会导致按钮失去打开/关闭功能之间的区别。

根据要求更新代码:

<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>

最佳答案

所以奇怪的是你在某些部分使用 jquery 而在其他部分使用 vanilla JS。我是一个 jQuery 爱好者，而您正在使用 jQuery，所以我将在 jQuery 中发布我的答案。

//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 查找页面上与您的选择相匹配的所有元素并监听点击。它不会查找创建监听器后添加的任何内容。在您的示例中，只需在添加所有内容后将代码向下移动即可。但首选方法是使用事件委托(delegate)并将监听器委托(delegate)给父元素，或者在我的示例中为文档本身。

我的代码说:

嘿，告诉文档，如果它得到点击，检查它是否在 .accordian 上，以及是否运行此代码。

您的代码表示，立即找到页面上的 .accordians，如果它们被点击，则运行此代码。

委托(delegate)的好处是您可以随时通过 ajax 或任何其他方式添加更多元素，并且监听器仍然可以工作。

关于javascript - 小幅更改后 Accordion 按钮未关闭(面板)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45242920/

25 4 0
文章推荐： svn - 在SVN中共享文件
文章推荐： android - 从网络下载 Artifact 时，Gradle发生了错误
文章推荐： rtp - 捕获 Lync 视频流
文章推荐： gradle - 无法解析gradle.build中的ssh类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com