簡體   English   中英

Bootstrap 4 手風琴無法在移動設備上打開

[英]Bootstrap 4 accordions not opening on mobile

我有一個 Boostrap 4 手風琴頁面。

在 Chrome 中處於響應模式時,它們會打開。 但是,在實際的 Android 手機或 iPhone 上嘗試時,它們無法打開。 我很困惑。 有任何想法嗎? (我已經添加了 JS 和 jQuery 作為標簽,因為我很確定這可能是問題所在,如果不是,很抱歉。)

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <!-- MOBILE VERSION --> <div class="d-md-none"> <div class="container-fluid"> <div id="accordion" class="accordion"> <div class="card mb-0"> <div class="card-header text-center collapsed" data-toggle="collapse" href="#collapseOne"> <a class="card-title"> Mon - 00/00/00 </a> </div> <div id="collapseOne" class="card-body collapse" data-parent="#accordion" > <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </p> </div> <div class="card-header text-center collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="card-title"> Tues - 00/00/00 </a> </div> <div id="collapseTwo" class="card-body collapse" data-parent="#accordion" > <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </p> </div> <div class="card-header text-center collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix"> <a class="card-title"> Wed - 00/00/00 </a> </div> <div id="collapseSix" class="collapse" data-parent="#accordion" > <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. samus labore sustainable VHS. </div> </div> <div class="card-header text-center collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven"> <a class="card-title"> Wed - 00/00/00 </a> </div> <div id="collapseSeven" class="collapse" data-parent="#accordion" > <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. samus labore sustainable VHS. </div> </div> </div> </div> </div> </div>

這個問題的解決方案是將 CSS cursor:pointer 添加到手風琴 div。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM