Zaloguj się, aby obserwować  
PawelC

[JS+CSS]Zapamiętywanie pozycji menu

Polecane posty

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

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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

 


:zdziwko: Masz lęk wysokości to nie oglądaj !

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Node.js / MySQL :chatownik:

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Nie ma potrzeby rzeźbienia jakiś cudaków z localstorage czy czymkolwiek podobnym. Napisz sobie metodke, która będzie po załadowaniu sprawdzała elementy menu i porównywałą z aktualnym urlem. Jeśli trafi na taki sam doda mu jakąś klase css np .expanded i już.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

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

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.