使用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>