javascript - 如何使 javascript 手风琴支持移动设备？- WordPress

Question

我在我的 wordpress 博客中制作手风琴。但似乎手机浏览器不支持手风琴，无法打开。有什么办法可以解决吗？谢谢你

注意：在桌面上可以打开手风琴。

网址：https ://blog.bookingtogo.com/destinasi/tempat-wisata-di-bali/

我将分享代码，我的手风琴代码如下：

function add_shortcode_accordion_bali(){
ob_start();

echo '

<div>
    <button class="jeniswisata">Wisata Bahari</button>

    <div class ="panelkabupatenkota">
       

        <button class="kabupatenkota">Kabupaten Badung</button>
            <div class ="panelkecamatan">
                <button class="kecamatan">Kecamatan Kuta</button>
                <div class="wisata">
                    <br />
                    <p><a href="#pantai-kuta">Pantai Kuta</a></p>
                </div>
                <button class="kecamatan">Kecamatan Kuta Utara</button>
                <div class ="wisata">
                    <br />
                    <p><a href="#pantai-batu-bolong">Pantai Batu Bolong</a></p>
                </div>

                <button class="kecamatan">Kecamatan Kuta Selatan</button>
                <div class="wisata">
                    <br />
                    <p><a href="#pantai-balangan">Pantai Balangan</a></p>
                    <p><a href="#pantai-pandawa">Pantai Pandawa</a></p>
                    <p><a href="#pantai-jimbaran">Pantai Jimbaran</a></p>
                    <p><a href="#pantai-nusa-dua">Pantai Nusa Dua</a></p>
                    <p><a href="#pantai-dreamland">Pantai DreamLand</a></p>
                    <p><a href="#pantai-tanjung-benoa">Pantai Tanjung Benoa</a></p>
                </div>
            </div>
            
        <button class="kabupatenkota">Kabupaten Buleleng</button>
            <div class="panelkecamatan">
                <button class="kecamatan">Kecamatan Buleleng</button>
                <div class="wisata">
                    <br />
                    <p><a href="#pantai-lovina">Pantai Lovina</a></p>
                </div>
            </div>
        
    </div>


</div>


';

    
?>

<style>
    
       .jeniswisata {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 676px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
        }
        .kabupatenkota {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 658px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
        }

        .kecamatan{

        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 640px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;


        }
    
        .active, .jeniswisata:hover {
        background-color: #ccc; 
        }
    
        .panelkabupatenkota {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }

        .panelkecamatan{
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }
    
        .wisata {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }


</style>
<script>
     var acc = document.getElementsByClassName("jeniswisata");
     var accs = document.getElementsByClassName("kabupatenkota");
     var accsn = document.getElementsByClassName("kecamatan");
     var i;

     for (i = 0; i < acc.length; i++) {
     acc[i].addEventListener("click", function() {
         this.classList.toggle("active");
         var panelkabupatenkota = this.nextElementSibling;
         if (panelkabupatenkota.style.display === "block") {
         panelkabupatenkota.style.display = "none";
         } else {
         panelkabupatenkota.style.display = "block";
         }

       });
      }
    
     for (i = 0; i < accsn.length; i++) {
     accsn[i].addEventListener("click", function() {
         this.classList.toggle("active");
         var panelkecamatan = this.nextElementSibling;
         if (panelkecamatan.style.display === "block") {
         panelkecamatan.style.display = "none";
         } else {
         panelkecamatan.style.display = "block";
         }

       });
      }
    
     for (i = 0; i < accs.length; i++) {
        accs[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var wisata = this.nextElementSibling;
            if(wisata.style.display === "block"){
            wisata.style.display = "none";
            }else{
            wisata.style.display = "block";
            }

        });
       }
    
</script>

<?php
    
return ob_get_clean();
    
    

}add_shortcode('add_shortcode_accordion_bali', 'add_shortcode_accordion_bali');

我让它更短，我的完整代码很长。

标签： javascripthtmlcsswordpress