Proste menu rozwijane w polu Javascript

Wiem, że to pytanie zostało zadane kilka razy, ale szukam prostszego podejścia. Większość pytań dotyczy pełnego menu rozwijanego Javascript, ale zaraz po jednym małym pudełku. Patrzył wszędzie, a to nie zostało odebrane.Proste menu rozwijane w polu Javascript

Uczę się JavaScriptu z książki tekstowej, którą kupiłem, więc wolałbym, żeby ktoś mi pomógł, lub jeśli wolisz po prostu dawać odpowiedzi, wystarczyłoby trochę komentarza, więc wiem, co się dzieje na. Wolałbym używać zwykłego Javascript zamiast jQuery, ponieważ uczę się z książki tekstowej tylko w języku JavaScript.

Tworzę mini rodzaj strony społecznościowej. A w prawym górnym rogu, mam nazwę użytkownika, ze strzałką obok niego. Próbuję utworzyć okno rozwijane, gdy kliknięto strzałkę, a wewnątrz tego pola wyboru będzie przycisk "Wyloguj" i przycisk "Ustawienia". Szczerze mówiąc nie mam pojęcia, od czego zacząć, ponieważ to jest coś, co próbuję.

Źródło

2013-03-06 Fizzix

Po co wynajdować koło, gdy Bootstrap oferuje ładne i proste menu rozwijane. Możesz dostosować i wybrać, co chcesz z Bootstrap, dzięki czemu nie masz bezużytecznych css i javascript. (http://twitter.github.com/bootstrap/components.html#dropdowns) –

Wygląda na to, że to pytanie zostało zadane wcześniej: http://stackoverflow.com/questions/7362670/simple-javascript-dropdown-menu –

@ icanc - Jak już wspomniałem, uczę się JavaScript, więc muszę wiedzieć, jak to zrobić, to jest zwykły JavaScript bez bibliotek. – Fizzix

Znajdź przykładowy kod poniżej. Możemy zrobić to na wiele sposobów. Jest to proste rozwiązanie dla początkujących JavaScript.

<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
function showDiv(){ 
    if(document.getElementById('showDiv').style.display == 'none'){ 
     document.getElementById('showDiv').style.display = 'block'; 
    }else{ 
     document.getElementById('showDiv').style.display = 'none'; 
    } 
} 
</script> 
</head> 
<body> 
<div style="width:auto;; margin:0 auto;"> 
    <div style="position:relative; width:130px; padding:10px; float:left; border:1px solid blue;"> 
     <div style="float:left;">Welcome Friend!</div> 
     <div style="float:left; margin-left:15px;" onclick="showDiv();">></div> 

    </div> 
    <div id="showDiv" style="display:none; float:right; width:150px; height:50px; position:absolute; margin-top:40px; border:1px solid red;"> 
     <div style="float:right;"><input type="submit" value="Settings" /></div> 
     <div style="clear:both;"></div> 
     <div style="float:right;"><input type="submit" value="Sign Out" /></div> 
    </div> 
</div> 
</body> 
</html>

Źródło

2013-03-06 05:38:37

utwórz łącze> a następnie pobierz za darmo rękę lub nadaj mu kursor wskaźnika. Również wszystkie CSS mogą być w arkuszu stylów i wszystkie JS w głowie, w tym onclick - nauczmy Jade dobrych praktyk :) – mplungjan

@mplungjan - haha, dzięki za wskazówki :) – Fizzix

@Vijayakumar Chandrasek - Ten kod jest idealny i wykonuje dokładnie czego potrzebuję :) Bardzo prosty i łatwy do odczytania. Zrobię to i zacznę go budować. Dzięki za twoją pomoc :) – Fizzix

Proste menu rozwijane w polu Javascript

Odpowiedz

Powiązane problemy