Skocz do zawartości

[JS+CSS]Zapamiętywanie pozycji menu

PawelC

Przez PawelC
w HTML i CSS

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 Veteran

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

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

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