使用Javascript去除班級

Question

我正在努力教自己一點點的JavaScript項目，我正在努力，只是想看看我能否得到一些幫助。我使用3種不同的下拉菜單，當使用下面的功能單擊另一個菜單時，隱藏一個菜單。它的工作

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

上面的代碼運行良好，當我有2個不同的下拉菜單。但現在我已經3了，它似乎沒有看到我在下面添加的3行。

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

如果我切換，中間行會regonize該行的底線，我猜有什麼毛病我寫它的格式？有些東西告訴我，我不包括分隔符或其他東西。無論如何，我知道它很小，也許有人可以指出我。

編輯：

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

您發佈的代碼具有之間的實際id S 0不匹配F內容和document.getElementById()線，但假設你改正，你的代碼是實際可行的，但內容的每一位剛剛捲起下其他的打算，所以你永遠看不到正確的內容。

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>

但是，因爲你是新來這個，最好不要與不良的生活習慣開始，所以不要使用內嵌HTML事件屬性（即onclick等），有有很多原因，你可以review them here。

接下來，你有很多不必要的HTML和HTML的結構應當改變代表內容的層次結構。

而且，你不需要爲每個菜單點擊不同的功能如試圖跟蹤哪些應該被隱藏，哪些應該在不斷增加的菜單項列表中顯示不是一個可擴展的結果。

當這些更改時，HTML是更清潔和較少參與和JavaScript也簡單得多：

// 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>