html - 引导手风琴数据切换无法在移动设备上运行
问题描述
我发现其他人问了同样的问题,但没有得到答案。我正在为手风琴使用 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>
我尝试添加光标:指向我的 a 标签的指针,并尝试将 a 标签更改为按钮标签。当我单击链接时,我查看了 chrome 开发人员工具中的元素 - 第一张卡片从 class="collapse show" 变为 class="collapses" 到 class="collapse" 但没有任何反应。(第一张卡片应该在页面访问时显示)。
解决方案
将您的代码粘贴到正在进行的项目文件中...上传到网络服务器上...一切正常...在 Chrome 移动浏览器上测试...版本 68.0 ...我使用的版本(如果有帮助):Bootstrap 4.1。 2 jQuery 3.3.1 Popper.js 1.14.3
推荐阅读
- android - 如何从高分辨率视图中获取位图?
- elasticsearch - Kibana 索引模式未保存
- django - 如何在 Django 中更改密码
- google-apps-script - GAS - 当网络应用程序部署为“任何拥有 Google 帐户的人”时,我可以获得 Google 登录用户详细信息吗?
- command-line-interface - 使用 Jfrog CLI 定义快照删除
- algorithm - 软堆在任何给定时间最多包含 n/2 次幂 r-3 损坏的项目。怎么会这样?
- c# - 如何将数组绑定到自定义索引器?
- javascript - 无法从 main.js 中的 vue 导入 Vue
- angular - Angular rambda 处理从不可变数组操作返回的只读类型
- javascript - 如何将数据从javascript传递到php?