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

debugcn 发表于 Dev

埃里亚·范·阿切特迪克

这段代码运作良好：

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

但这是行不通的。知道为什么吗？

阿卜杜拉赫曼

删除以下属性，然后根据宽度添加属性，如下所示。

您可以按如下方式使用调整大小功能：如果窗口调整大小，它将触发，并且首次启动时，您必须检查大小。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。