如何仅在智能手机上编写 Bootstrap 手风琴代码

Question

此代码运行良好：

<!doctype html> <html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body> 

<div id="accordion" class="container"> 
<div class="card-deck">

<div class="card"> 
<div class="card-header" id="headingOne" > 
<h3 class="h3_toggle" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Titel 1</h3> 
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> 
<div class="card-body">Content 1</div> 
</div>
</div>

<div class="card"> <div class="card-header" id="headingTwo" > 
<h3 data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Titel 2</h3> 
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion"> 
<div class="card-body">Content 2</div> 
</div> 
</div> 
</div> 
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="js/script.js"></script> </body> </html>

但我只想在智能手机上使用 Bootstrap 的手风琴功能。因此，我从我的 HTML 标记中删除了所有手风琴属性，并将其添加到我的 script.js:

(function ($) {
  "use strict";

if (screenwidth <= 768) {
$('.h3_toggle').attr("data-toggle", "collapse").attr("data-target", "#collapseOne").attr("aria-expanded", "true").attr("aria-controls", "collapseOne");
$('#collapseOne').addClass("collapse show");
$('#collapseOne').attr("aria-labelledby", "headingOne").attr("data-parent", "#accordion");    }

})(jQuery);

但是没用。知道为什么吗？

Answer 1

去除如下属性，按照宽度添加如下。

您可以使用如下调整大小功能：如果window调整大小，它将触发，并且对于第一次初始化，您必须检查大小。

<!doctype html> 
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body> 

<div id="accordion" class="container"> 
<div class="card-deck">

 <div class="card"> 
  <div class="card-header" id="headingOne" > 
   <h3 class="h3_toggleOne">Titel 1</h3> 
  </div>
 <div id="collapseOne"> 
  <div class="card-body">Content 1</div> 
 </div>
 </div>

 <div class="card"> 
  <div class="card-header" id="headingTwo" > 
   <h3 class="h3_toggleTwo">Titel 2</h3> 
  </div>
 <div id="collapseTwo"> 
  <div class="card-body">Content 2</div> 
 </div> 
 </div> 
</div> 
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script>

if (screen.width <= 768) { // this will work only one time at first
    addAttributes();
}else {
 removeAttributes();
}

$(window).resize(function() { // this will be work every time screen resize
   if (screen.width <= 768) {
     addAttributes();
 } else {
  removeAttributes();
    }
});

function addAttributes(){
 $('.h3_toggleOne').attr("data-toggle", "collapse").attr("data-target", "#collapseOne").attr("aria-expanded", "true").attr("aria-controls", "collapseOne");
    $('#collapseOne').addClass("collapse show");
    $('#collapseOne').attr("aria-labelledby", "headingOne").attr("data-parent", "#accordion");   
  
    $('.h3_toggleTwo').attr("data-toggle", "collapse").attr("data-target", "#collapseTwo").attr("aria-expanded", "false").attr("aria-controls", "collapseTwo");
    $('#collapseTwo').addClass("collapse");
    $('#collapseTwo').attr("aria-labelledby", "headingTwo").attr("data-parent", "#accordion");
}
function removeAttributes(){
 $('.h3_toggleOne').removeAttr("data-toggle").removeAttr("data-target").removeAttr("aria-expanded").removeAttr("aria-controls");
 $('#collapseOne').removeClass("collapse show");
 $('#collapseOne').removeAttr("aria-labelledby").removeAttr("data-parent"); 
 $('.h3_toggleTwo').removeAttr("data-toggle").removeAttr("data-target").removeAttr("aria-expanded").removeAttr("aria-controls");
 $('#collapseTwo').removeClass("collapse show");
 $('#collapseTwo').removeAttr("aria-labelledby").removeAttr("data-parent");
}
</script> 
</body> 
</html>

如何仅在智能手机上编写 Bootstrap 手风琴代码

How to code Bootstrap Accordion only on Smartphone

javascript

mobile

jquery

accordion

toggle