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

问题描述 投票:0回答:1

此代码运行良好:

<!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); 

但是它不起作用。知道为什么吗?

javascript jquery mobile toggle accordion
1个回答
0
投票

我不知道您是如何获得屏幕宽度的,但是,您是否尝试过screen.width

© www.soinside.com 2019 - 2024. All rights reserved.