пропозиції роботи
konto usunięte
Temat: Zapamiętanie pozycji rozwijanego menu
Witam,Mam następujący problem związany z moim menu. Mam na stronie rozwijane menu, które ma kategorie główną, subkategorie oraz subkategorie 2 poziomu. Chciałbym uzyskać efekt, aby po kliknięciu w subkategorię 2 poziomu, otworzyło mi podstronę i rozwinęło menu do pozycji w którą kliknąłem. Coś jak na tej stronie: oddsportal.com w lewym menu. Obecnie działa to tak, że jak przejdę na podstronę, to menu całe się zwija, a chciałbym żeby zostało rozwinięte do poziomu subkategorii którą kliknąłem. Do localStorage zapisuję sobie ID subkategorii którą ostatni kliknąłem, ale na tym moja wiedza się kończy :(
Walczę z tym od 2 dni, i nie potrafię sobie poradzić ;/ Jakiś pomysł?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <span id="local"></span>
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li><a onclick="saveMenu(1)" href="plik1.html">List 1</a></li>
<li><a onclick="saveMenu(2)" href="plik2.html">List 2</a></li>
<li><a onclick="saveMenu(3)" href="plik3.html">List 3</a></li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li><a onclick="saveMenu(4)" href="plik4.html">List 1</a></li>
<li><a onclick="saveMenu(5)" href="plik5.html">List 2</a></li>
<li><a onclick="saveMenu(6)" href="plik6.html">List 3</a></li>
</ul>
</li>
<li class="teset"><a>Type of driving</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/script.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS
.sub_list, .sub_sub_list {display:none;}
a:hover{ background-color:red; }JS
$(document).ready(function () {
var current = localStorage.getItem('current');
if (current) {
console.log((current));
}
});
$(".parent_click").click(function () {
$(".parent_click").not(this).next().slideUp();
$(this).closest(".parent").find(".sub_list").slideToggle();
// "this" have to be stored in localStorage for parent
console.log(this);
return false;
});
$(".sub_click").click(function () {
var elem = $(this).next();
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
// "this" have to be stored in localStorage for sublist
console.log(this)
});
function saveMenu(currentId) {
localStorage.clear();
localStorage.setItem('current', currentId);
}
