使用 Javascript 删除类

Removing Class Using Javascript

提问人：Born2DoubleUp 提问时间：10/9/2017 最后编辑：Born2DoubleUp 更新时间：10/9/2017 访问量：87

问：

我正在尝试为我正在从事的项目自学一点 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');
}

如果我用中间线切换底线，它会重新调整该线，我猜我写的格式有问题吗？有些东西告诉我，我没有包括分隔符或其他东西。无论如何，我知道这是一件小事，也许有人可以向我指出来。

编辑：

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;}
JavaScript的

评论

0赞 putvande 10/9/2017
你能展示你的HTML吗？
1赞 Scott Marcus 10/9/2017
请添加相关的 HTML 和 CSS，以便我们可以复制您的问题
0赞 trincot 10/9/2017
您是否检查了控制台是否有错误？
0赞 NewToJS 10/9/2017
您是否检查了浏览器控制台是否有错误？如果没有，那么我建议你检查一下。另外，请包括与您的问题相关的内容。谢谢。html
0赞 Jonas Wilms 10/9/2017
可能没有，所以它会崩溃，使它只按一定的顺序工作（只是崩溃之前的东西工作）DropDownMenuChart

答：

0赞 Scott Marcus 10/9/2017 #1

您发布的代码在内容的实际 s 和行之间不匹配，但假设您纠正了这一点，您的代码实际上确实有效，但每一点内容最终都会落在另一位之下，因此您永远不会看到正确的内容。iddocument.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 {
	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

接下来，您有很多不需要的 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>

上一个：使用 php 从 json 结果中提取项目（项目多次出现）

下一个：scandir（） 按修改日期排序