Как кодировать Bootstrap Аккордеон только на смартфоне - PullRequest
Новая
       30

Как кодировать Bootstrap Аккордеон только на смартфоне

1 голос
/ 11 марта 2020

Этот код работает хорошо: 

<!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 разметки и добавляю это в свой скрипт. 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);

Но это не работает. Есть идеи почему?

1 Ответ

1 голос
/ 11 марта 2020

Удалите атрибуты, подобные следующим, и добавьте их в соответствии с шириной, как показано ниже.

Вы можете использовать функцию изменения размера следующим образом: Она будет срабатывать при изменении размера окна, а также при первом запуске вы должны проверить размер. 

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