Stworzyłem proste menu CSS z tylko jednym podmenu rozwijanym, które należy otworzyć TYLKO na stronie ładującej i pozostawić domyślnie zamknięte na pozostałych stronach witryny.
Udało mi się ustawić menu rozwijane, aby było domyślnie otwierane podczas ładowania strony z Javascriptem (i zamknięte po kliknięciu), i działa to doskonale.
<!-- MENU -->
<div class="divBg">
<!-- BUTTON 1 -->
<div class="dropdown">
<button class="dropbtnMain" onclick="document.getElementById("dropdown").style.display=="none" ? document.getElementById("dropdown").style.display="" : document.getElementById("dropdown").style.display ="none";">Dropdown categories</button>
<!-- BUTTON 1 DROPDOWN CONTENT -->
<div class="dropdown-content" id="dropdown">
<a href=#>Dropdown link 1</a>
<a href=#>Dropdown link 2</a>
<a href=#>Dropdown link 3</a>
</div>
</div>
<!-- BUTTON 2 -->
<div class="dropdown">
<button class="dropbtn">Category 2</button>
</div>
<!-- BUTTON 3 -->
<div class="dropdown">
<button class="dropbtn">Category 3</button>
</div>
</div>
Ale czy istnieje rozwiązanie, aby menu rozwijane było otwierane TYLKO na stronie głównej i domyślnie zamykane na wszystkich innych stronach?
Odpowiedzi:
1 dla odpowiedzi № 1Możesz to zrobić, dodając klasę css:
.is-hidden {
display: none;
}
a następnie w JavaScript możesz bazować na załadowanej stronie:
if (window.location.pathname !== "/") {
document.querySelector(".dropdown").classList.add("is-hidden");
}
1 dla odpowiedzi nr 2
Jeśli używasz osobnych plików HTML, możesz po prostu usunąć javascript?
Ale zgaduję, chociaż cię nie wymieniłemumieszczając plik rozwijany na innych stronach, możesz użyć funkcji javascript z location.pathname, aby sprawdzić nazwę pliku i uruchomić go tylko wtedy
To twoje kliknięcie.
onclick="foo()"
Jest to funkcja, aby przejść na górę w obszarze skryptu lub pliku skryptu.
function foo(){
if(location == "http://foobar.com"){
//Code to open your drop down
}
}
coś takiego.
0 dla odpowiedzi № 3
Możesz nadać swojemu ciału znacznik klasy „home”, a następnie dodać następujący CSS.
body.home .dropdown{display:block;}
To powinno wystarczyć.
0 dla odpowiedzi nr 4
Wypróbuj ten kod CSS.
#dropdown
{
display: none;
}
body.home #dropdown
{
display:block;
}
0 dla odpowiedzi № 5
Dodałbym do ciała identyfikator i klasę w następujący sposób:
<body id="home" class="home">
...
</body>
A potem sprawdziłbym, czy body ma ten selektor:
function hasClass(ele, cls) {
return ele.className.match(new RegExp("(\s|^)"+cls+"(\s|$)"));
}
if(hasClass(document.getElementById("home"), "test")){
//do something
}