html - 引导 Accordion 数据切换不适用于移动设备

Question

我发现其他人也问过同样的问题，但没有得到回答。我正在为 Accordion 使用 Bootstraps 数据切换，但它不适用于移动设备(不仅是 IOS，而且它不适用于 chrome 开发人员工具或我的 Galaxy S8)。

<!-- How it Works -->
<div id="howItWorks" class="interiorContent">
    <div class="container">
        <div class="intContHead">
            <h2>How it Works</h2>
        </div>


        <div class="accordion" id="howItWorksAccordion">
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h6 class="mb-0">
                        <a role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" data-target="#collapseOne" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Step 1: Create ASComm.NET Configuration File
                        </a>
                    </h6>
                </div>

                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#howItWorksAccordion">
                    <div class="card-body">

                        <p>For more advanced applications (branded, database, etc.), you can build your own configuration
                            application that utilizes ASComm.NET's configuration and serialization capabilities.</p>

                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h6 class="mb-0">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseTwo" aria-expanded="false"
                            aria-controls="collapseTwo">
                            Step 2: Add ASComm Excel Add-in to Excel.
                        </a>
                    </h6>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#howItWorksAccordion">
                    <div class="card-body">
                        <p>
                            <strong>NOTE: Step 2 only needs to be perfomed once. If you have already added ASComm.NET Excel Add-in
                                to Excel, proceed to Step 3.</strong>
                        </p>

                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h6 class="mb-0">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseThree" aria-expanded="false"
                            aria-controls="collapseThree">
                            Step 3: Configure ASComm.NET Excel Add-in Operating Parameters
                        </a>
                    </h6>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#howItWorksAccordion">
                    <div class="card-body">
                        <p>3.1 Locate the ASComm.NET tab on the Excel ribbon</p>

                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingFour">
                    <h6 class="mb-0">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseFour" aria-expanded="false"
                            aria-controls="collapseFour">
                            How to Read and Log Data
                        </a>
                    </h6>
                </div>
                <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#howItWorksAccordion">
                    <div class="card-body">
                        <img alt="Excel AddIn Ribbon" class="img-responsive" src="../../../images/ascomm_excel_addin_ribbon.png">

                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingFive">
                    <h6 class="mb-0">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseFive" aria-expanded="false"
                            aria-controls="collapseFive">
                            How to Write Data
                        </a>
                    </h6>
                </div>
                <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#howItWorksAccordion">
                    <div class="card-body">
                        <!--Manual Start-->
                        <p>ASComm Excel Add-in can read data from hardware devices and populate Excel spreadsheets without
                            writing any code.</p>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我尝试添加 curser: pointer 到我的 a 标签，我尝试将 a 标签更改为按钮标签。我在点击链接时查看了 chrome 开发人员工具中的元素——第一张卡片从 class="collapse show"变为 class="collapsing"再到 class="collapse"但没有任何反应。 (第一张卡片应该在页面访问时显示)。

Answer 1

将您的代码粘贴到正在进行的元素文件中...上传到网络服务器...一切正常...在 Chrome 移动浏览器上测试...版本 68.0 ... 我使用的版本(如果有帮助): Bootstrap 4.1.2 JQuery 3.3.1 波普尔.js 1.14.3