我有一个Bootstrap 4手风琴,对于Jquery中的Local Storage概念我是一个新手,我的手风琴代码如下。但是,我希望实施
.collapsible-link::before {
content: '';
width: 14px;
height: 2px;
background: #333;
position: absolute;
top: calc(50% - 1px);
right: 1rem;
display: block;
transition: all 0.3s;
}
.collapsible-link::after {
content: '';
width: 2px;
height: 14px;
background: #333;
position: absolute;
top: calc(50% - 7px);
right: calc(1rem + 6px);
display: block;
transition: all 0.3s;
}
.collapsible-link[aria-expanded='true']::after {
transform: rotate(90deg) translateX(-1px);
}
.collapsible-link[aria-expanded='true']::before {
transform: rotate(180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-9 mx-auto">
<!-- Accordion -->
<div id="accordionExample" class="accordion shadow">
<!-- Accordion item 1 -->
<div class="card">
<div id="headingOne" class="card-header bg-white shadow-sm border-0">
<h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="d-block position-relative text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #1</a></h6>
</div>
<div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
<div class="card-body p-5">
<p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</div>
</div>
</div>
<!-- Accordion item 2 -->
<div class="card">
<div id="headingTwo" class="card-header bg-white shadow-sm border-0">
<h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #2</a></h6>
</div>
<div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">
<div class="card-body p-5">
<p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</div>
</div>
</div>
<!-- Accordion item 3 -->
<div class="card">
<div id="headingThree" class="card-header bg-white shadow-sm border-0">
<h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #3</a></h6>
</div>
<div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">
<div class="card-body p-5">
<p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
按照使用Web存储API的要求,您可以测试变量:
const firstTime = localStorage.getItem('firstTime');
if (firstTime == null) {
$('#accordionExample .collapse').removeAttr("data-parent").collapse('show');
localStorage['firstTime'] = 'false';
} else {
$('#accordionExample .collapse').attr("data-parent","#accordionExample").collapse('hide');
}
代码段(在此处显示小提琴):
const firstTime = localStorage.getItem('firstTime');
if (firstTime == null) {
$('#accordionExample .collapse').removeAttr("data-parent").collapse('show');
localStorage['firstTime'] = 'false';
} else {
$('#accordionExample .collapse').attr("data-parent","#accordionExample").collapse('hide');
}
.collapsible-link::before {
content: '';
width: 14px;
height: 2px;
background: #333;
position: absolute;
top: calc(50% - 1px);
right: 1rem;
display: block;
transition: all 0.3s;
}
.collapsible-link::after {
content: '';
width: 2px;
height: 14px;
background: #333;
position: absolute;
top: calc(50% - 7px);
right: calc(1rem + 6px);
display: block;
transition: all 0.3s;
}
.collapsible-link[aria-expanded='true']::after {
transform: rotate(90deg) translateX(-1px);
}
.collapsible-link[aria-expanded='true']::before {
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-9 mx-auto">
<!-- Accordion -->
<div id="accordionExample" class="accordion shadow">
<!-- Accordion item 1 -->
<div class="card">
<div id="headingOne" class="card-header bg-white shadow-sm border-0">
<h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="d-block position-relative text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #1</a></h6>
</div>
<div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
<div class="card-body p-5">
<p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</div>
</div>
</div>
<!-- Accordion item 2 -->
<div class="card">
<div id="headingTwo" class="card-header bg-white shadow-sm border-0">
<h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #2</a></h6>
</div>
<div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">
<div class="card-body p-5">
<p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</div>
</div>
</div>
<!-- Accordion item 3 -->
<div class="card">
<div id="headingThree" class="card-header bg-white shadow-sm border-0">
<h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #3</a></h6>
</div>
<div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">
<div class="card-body p-5">
<p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
</div>
</div>
</div>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句