Hur gör jag detta på rätt sätt? (javascript)
Hej,
Jag sitter och försöker lära mig lite javascript, mest trial and error.
Just nu knåpar jag på en dropdown meny.
Såhär ser koden ut atm:
Javascript:
function dropdown() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger.style.display == "none") {
dropdownTrigger.style.display="block";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger.style.display="none";
}
}
function dropdown2() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger2.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="block";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger2.style.display="none";
}
}
function dropdown3() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger3.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="block";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger3.style.display="none";
}
}
function dropdown4() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger4.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="block";
}
else {
dropdownTrigger4.style.display="none";
}
}
function dropdownAll() {
var ddaText = document.getElementById("dda");
var dropdownTrigger1 = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (ddaText.innerHTML == "Open all"){
ddaText.innerHTML = "Hide all";
dropdownTrigger1.style.display="block";
dropdownTrigger2.style.display="block";
dropdownTrigger3.style.display="block";
dropdownTrigger4.style.display="block";
}
else {
ddaText.innerHTML = "Open all";
dropdownTrigger1.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
}
HTML:
<div class="left-menu">
<p>Menu</p>
<br>
<a href="#" onclick="dropdown()"> +Menu 1</a>
<ul id="dd" style="display:none;">
<li><a href="#">item 1:1</a></li>
<li><a href="#">item 1:2</a></li>
<li><a href="#">item 1:3</a></li>
<li><a href="#">item 1:4</a></li>
</ul>
<a href="#" onclick="dropdown2()"> +Menu 2</a>
<ul id="dd2" class="dropdown" style="display:none;">
<li><a href="#">item 2:1</a></li>
<li><a href="#">item 2:2</a></li>
<li><a href="#">item 2:3</a></li>
<li><a href="#">item 2:4</a></li>
</ul>
<a href="#" onclick="dropdown3()"> +Menu 3</a>
<ul id="dd3" class="dropdown" style="display:none;">
<li><a href="#">item 3:1</a></li>
<li><a href="#">item 3:2</a></li>
<li><a href="#">item 3:3</a></li>
<li><a href="#">item 3:4</a></li>
</ul>
<a href="#" onclick="dropdown4()"> +Menu 4</a>
<ul id="dd4" class="dropdown" style="display:none;">
<li><a href="#">item 4:1</a></li>
<li><a href="#">item 4:2</a></li>
<li><a href="#">item 4:3</a></li>
<li><a href="#">item 4:4</a></li>
</ul>
<a href="#" id="dda" onclick="dropdownAll()">Open all</a>
</div>
Det fungerar precis som jag vill men det känns absolut inte som jag har gjort det på bästa sättet, snarare tvärtom.
Hur hade ni som kan gått tillväga?
Citera om du vill ha svar :)