Klasse mit Javascript entfernen

Question

Ich versuche, mir ein wenig Javascript für das Projekt beizubringen, an dem ich arbeite, und wollte nur sehen, ob ich Hilfe bekommen könnte. Ich verwende 3 verschiedene Dropdown-Menüs und verwende die folgende Funktion, um ein Menü auszublenden, wenn auf ein anderes geklickt wird. Es funktionierte

function DropDownMenuNavigation() { 
    document.getElementById("DropDownMenuNav").classList.toggle("show"); 
    document.getElementById('DropDownMenuChart').classList.remove('show'); 
} 

Der obige Code funktionierte gut, als ich 2 verschiedene Dropdown-Menüs hatte. Aber jetzt, da ich 3 habe, scheint es nicht die 3 Zeile zu sehen, die ich unten hinzugefügt habe.

function DropDownMenuNavigation() { 
    document.getElementById("DropDownMenuNav").classList.toggle("show"); 
    document.getElementById('DropDownMenuChart').classList.remove('show'); 
    document.getElementById('DropDownMenuCat').classList.remove('show'); 
} 

Wenn ich die untere Linie mit der Mittellinie wechseln wird diese Zeile regonize, ich vermute, es ist etwas falsch mit dem Format, das ich es in mich zu schreiben? Irgendetwas sagt mir, dass ich kein Trennzeichen oder etwas anderes verwende. Wie auch immer, ich weiß, dass es etwas Kleines ist, vielleicht könnte jemand es mir zeigen.

EDIT:

JAVASCRIPT

<script> 
function DropDownMenuNavigation() { 
document.getElementById("b2DropDownMenuNav").classList.toggle("show"); 
document.getElementById("b2DropDownMenuCat").classList.toggle("remove"); 
document.getElementById("b2DropDownMenuCha").classList.toggle("remove"); 
} 
function DropDownMenuCategory() { 
document.getElementById("b2DropDownMenuCat").classList.toggle("show"); 
document.getElementById("b2DropDownMenuNav").classList.toggle("remove"); 
} 
function DropDownMenuCharts() { 
document.getElementById("b2DropDownMenuCha").classList.toggle("show"); 
document.getElementById("b2DropDownMenuNav").classList.toggle("remove"); 
} 
</script> 

HTML

<div class="dropbtn" style="float: left;"> 
<button onclick="DropDownMenuNavigation()" class="dropbtn">&#9776; MENU</button> 
</div> 

<div class="dropbtn" style="float: left;"> 
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button> 
</div> 

<div class="dropbtn" style="float: left;"> 
<button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button> 
</div> 

<div class="dropdown"> 
<div id="b2DropDownMenuCategory" class="dropdown-content"> 
1 
</div> 
</div> 
<div class="dropdown"> 
<div id="b2DropDownMenuCharts" class="dropdown-content"> 
2 
</div> 
</div> 
<div class="dropdown"> 
<div id="b2DropDownMenuNavigation" class="dropdown-content"> 
3 
</div> 
</div> 

CSS

/* Dropdown Button */ 
.dropbtn { 
background-color: #0066a2; 
color: white; 
padding: 1px; 
font-size: 15px; 
font-weight: bold; 
border: none; 
cursor: pointer; 
} 
.dropbtn a { 
color: #FFFFFF; 
text-decoration: none; 
font-size: 15px; 
font-weight: bold; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
float: left; 
position: relative; 
display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #0066a2; 
min-width: 260px; 
max-width: 960px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 1; 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
color: #000000; 
text-decoration: none; 
} 

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 
.show {display:block;} 

Answer 1

Der Code, den Sie hat zwischen der tatsächlichen id s Mismatches geschrieben o Der Inhalt und die document.getElementById() Zeilen, aber vorausgesetzt, dass Sie das korrigieren, funktioniert Ihr Code in der Tat, aber jedes bisschen Inhalt endet nur unter der anderen, so dass Sie nie den richtigen Inhalt sehen.

function DropDownMenuNavigation() { 
 
    document.getElementById("b2DropDownMenuNav").classList.toggle("show"); 
 
    document.getElementById("b2DropDownMenuCat").classList.toggle("remove"); 
 
    document.getElementById("b2DropDownMenuCha").classList.toggle("remove"); 
 
    } 
 
    function DropDownMenuCategory() { 
 
    document.getElementById("b2DropDownMenuCat").classList.toggle("show"); 
 
    document.getElementById("b2DropDownMenuNav").classList.toggle("remove"); 
 
    } 
 
    function DropDownMenuCharts() { 
 
    document.getElementById("b2DropDownMenuCha").classList.toggle("show"); 
 
    document.getElementById("b2DropDownMenuNav").classList.toggle("remove"); 
 
    }

/* Dropdown Button */ 
 
    .dropbtn { 
 
    background-color: #0066a2; 
 
    color: white; 
 
    padding: 1px; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    border: none; 
 
    cursor: pointer; 
 
    } 
 
    .dropbtn a { 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    } 
 
    
 
    /* The container <div> - needed to position the dropdown content */ 
 
    .dropdown { 
 
\t float: left; 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
    /* Dropdown Content (Hidden by Default) */ 
 
    .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #0066a2; 
 
    min-width: 260px; 
 
    max-width: 960px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
    } 
 

 
    /* Links inside the dropdown */ 
 
    .dropdown-content a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
    } 
 

 
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 
 
    .show {display:block;}

<div class="dropbtn" style="float: left;"> 
 
    <button onclick="DropDownMenuNavigation()" class="dropbtn">&#9776; MENU</button> 
 
    </div> 
 

 
    <div class="dropbtn" style="float: left;"> 
 
    <button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button> 
 
    </div> 
 

 
    <div class="dropbtn" style="float: left;"> 
 
    <button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button> 
 
    </div> 
 

 
    <div class="dropdown"> 
 
    <div id="b2DropDownMenuCat" class="dropdown-content"> 
 
    1 
 
    </div> 
 
    </div> 
 
    <div class="dropdown"> 
 
    <div id="b2DropDownMenuCha" class="dropdown-content"> 
 
    2 
 
    </div> 
 
    </div> 
 
    <div class="dropdown"> 
 
    <div id="b2DropDownMenuNav" class="dropdown-content"> 
 
    3 
 
    </div> 
 
    </div>

Aber, da Sie diese neu sind, ist es am besten nicht mit schlechten Gewohnheiten zu beginnen, so verwenden Sie keine Inline-HTML-Event-Attribute (dh onclick, etc.), da Es gibt viele Gründe, warum und Sie können review them here.

Als nächstes haben Sie eine Menge unnötigen HTML und die Struktur des HTML sollte geändert werden, um die Hierarchie des Inhalts zu repräsentieren.

Sie brauchen auch keine separaten Funktionen für jeden Menü-Klick, um zu verfolgen, was versteckt werden sollte und was in einer ständig wachsenden Liste von Menüpunkten angezeigt werden sollte, ist kein skalierbares Ergebnis.

Wenn diese Änderungen vorgenommen werden, ist die HTML viel sauberer und weniger beteiligt und die JavaScript ist auch viel einfacher:

// First, get references to the HTML elements your code will need. 
 
// You could get individual references, like this: 
 
/* 
 
var b2DropDownMenuNav = document.getElementById("b2DropDownMenuNav"); 
 
var b2DropDownMenuCat = document.getElementById("b2DropDownMenuCat"); 
 
var b2DropDownMenuCha = document.getElementById("b2DropDownMenuCha"); 
 
*/ 
 

 
// But in your case, a single reference to the collection of menus will do. 
 
// We'll also want that collection to be converted to a JavaScript array. 
 
var menus = Array.prototype.slice.call(document.querySelectorAll(".dropbtn")); 
 

 
// Now, we can just loop over the array and give the buttons a common function 
 
// to perform when they are clicked (no need for multiple functions. 
 
menus.forEach(function(menu){ 
 
    menu.addEventListener("click", function(){ 
 
    
 
    // Hide any currently showing menu content 
 
    Array.prototype.slice.call(document.querySelectorAll(".dropdown-content")).forEach(function(content){ 
 
     content.classList.remove("show"); 
 
    }); 
 
    
 
    // Show the content of the menu that was clicked: 
 
    menu.querySelector(".dropdown-content").classList.toggle("show"); 
 
    }); 
 
});

/* Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #0066a2; 
 
    color: white; 
 
    padding: 1px; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    border: none; 
 
    cursor: pointer; 
 
    float:left; /* no need to write this inline with the HTML, just put it here */ 
 
} 
 

 
.dropbtn a { 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
/* I can't see any need for this class at all: 
 
.dropdown { 
 
    float: left; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
*/ 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    background-color: #0066a2; 
 
    min-width: 260px; 
 
    max-width: 960px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    position: absolute; 
 
    /* z-index: 1; <-- NOT NEEDED */ 
 
} 
 

 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 

 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 
 
.show { display:block; }

<!-- There is no need to nest button elements inside of div elements. 
 
    Just get rid of the buttons completely and make the divs the clickable 
 
    elements. --> 
 

 
<div class="dropbtn" id="b2DropDownMenuNav">&#9776; MENU 
 
    <div class="dropdown dropdown-content">1</div> 
 
</div> 
 

 
<div class="dropbtn" id="b2DropDownMenuCat">CATEGORIES 
 
    <div class="dropdown dropdown-content">2</div> 
 
</div> 
 

 
<div class="dropbtn" id="b2DropDownMenuCha">CATEGORIES 
 
    <div class="dropdown dropdown-content">3</div> 
 
</div>