如何仅在智能手机上编写 Bootstrap Accordion答案

【问题标题】：How to code Bootstrap Accordion only on Smartphone如何仅在智能手机上编写 Bootstrap Accordion
【发布时间】：2020-06-23 19:03:51
【问题描述】：

这段代码运行良好：

<!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】：

删除如下属性，并根据宽度添加如下。

你可以使用resize函数如下：如果窗口resize就会触发，并且对于第一次初始化你必须检查大小。

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

【讨论】：

在互联网上找到的。我正在尝试。
if (screen.width
是的，用 js 你可以用 Screen.width 的 Screen 获得
不工作，也试过这个：if ($(window).width().width
好的。让我看看你的所有文件。当我回答时只有js代码:)