Skocz do zawartości

[JS+CSS]Zapamiętywanie pozycji menu

PawelC

Przez PawelC,
w HTML i CSS

 Udostępnij

Rekomendowane odpowiedzi

PawelC Newbie

PawelC

Opublikowano
Opublikowano

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 :( Jakiś pomysł?

 

Mój kod 

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

 

Odnośnik do komentarza
Udostępnij na innych stronach
Mion Mentor

Mion

Opublikowano
Opublikowano

Jeśli potrzeba coś zapamiętać w aplikacji JavaScript odpalonej w przeglądarce można użyć w zależności od czas przechowywania danych :

Cytat
  • window.localStorage - stores data with no expiration date
  • window.sessionStorage - stores data for one session (data is lost when the browser tab is closed) 
https://www.w3schools.com/html/html5_webstorage.asp

 

HTTP 200 usługi IT -> Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL/ Laravel
Komory normobaryczne - normobaria.tech Wykonawca montażu i instalacji komory normobarii

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności

  Zgadzam się.