当我重新加载页面时，如何保持隐藏的div处于活动状态

Question

我有隐藏的部分，当我单击按钮时，我的部分正在打开，但当我试图重新加载我的页面或转到另一个页面时，我部分正在隐藏。我想让它一直打开，点击按钮并隐藏它。

这是我的html代码

<button class="btn btn-success advancedSearch">Advanced search</button>
<section id="search-banner" style="padding: 0px; ">
<div class="row">
<div class="main-heading">
<br><br><br><br>
<h3>Advanced search</h3>
</div>
</div>
<div class="container">
<div class="row text-center pb-4">
<div class="col-md-12">
<!--Header Text-->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<form action="{{ url('/advanced-search') }}" method="get">
@csrf
<div class="row">
<div class="col-md-4">
<div class="form-group ">
<select name="categoryId" id="inputState1" class="form-control">
<option></option>
</optgroup>
@endforeach
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group ">
<select name="cityId" id="inputState2" class="form-control">
<option></option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group ">
<select name="salaryId" id="inputState3" class="form-control">
<option></option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group ">
<select name="educationId" id="inputState4" class="form-control">
<option></option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group ">
<select name="experienceId" id="inputState5" class="form-control">
<option></option>
</select>
</div>
</div>
<div class="col-md-4">
<button style="width: 100%" type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

这是我的javascript代码

<script>
$(document).ready(function () {
$('#search-banner').hide();
$('.advancedSearch').on('click', function () {
$('#search-banner').fadeToggle();
});
});

我比你们更需要你们的帮助。

Answer 1

尝试使用localstorage函数来存储您的最后一个操作。

$(document).ready(function () {
/* you need to replace page and advanced-search-page, but the logic is like this */
if ( localStorage.getItem("banner_toggle") === null && page=='advanced-search-page') {
$('#search-banner').hide();
}
$('.advancedSearch').on('click', function () {
$('#search-banner').fadeToggle();
if ( localStorage.getItem("banner_toggle") === null) {
localStorage.setItem("banner_toggle", true);
} else {
localStorage.removeItem("banner_toggle");
}
});
});

Answer 2

如果您希望这段代码始终可见并在单击时隐藏，只需删除它。

$('#search-banner').fadeToggle();

jquerys的toggle函数在显示和隐藏元素之间切换。你可以在这里阅读更多关于这方面的信息。

现在，每次你点击按钮，它都会隐藏起来，否则，它将保持打开状态。

$(document).ready(function () {
$('.advancedSearch').on('click', function () {
$('#search-banner').fadeToggle();
$('#search-banner').hide();
});
});