使用Javascript删除类

Question

我正在尝试为我正在研究的项目自学一点javascript，只是想看看我是否能得到一些帮助。我使用3个不同的下拉菜单，我使用下面的功能在单击另一个菜单时隐藏一个菜单。它工作

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

当我有2个不同的下拉菜单时，上面的代码运行良好。但是现在我已经3了，它似乎没有看到我在下面添加的3行。

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

如果我用中间线切换底线，它会对那条线进行重新定位，我猜测我写入的格式是否有问题？有些东西告诉我，我不包括分隔符或其他东西。无论如何，我知道它的东西很小，也许有人可以指出我。

编辑：

JAVASCRIPT

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

HTML

/* 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;} 

CSS

Delete all the records from a table called survey and then set the status of deleted reference numbers to zero(0) which is in other table

Answer 1

您发布的代码在内容的实际id和document.getElementById()行之间存在不匹配，但假设您更正了，您的代码确实可以正常工作，但每一点内容都只是结束了另一个，所以你永远看不到正确的内容。

＆＃13;

＆＃13;

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");  
    }

＆＃13;

/* 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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，既然你是新手，最好不要从坏习惯开始，所以不要使用内联HTML事件属性（即onclick等），那里原因很多，您可以 review them here 。

接下来，您有许多不需要的HTML，并且应该更改HTML的结构以表示内容的层次结构。

此外，对于每个菜单点击，您不需要单独的功能，因为尝试跟踪应隐藏的内容以及应该在不断增加的菜单项列表中显示的内容不是可扩展的结果。

当进行这些更改时，HTML更清晰，更少参与，JavaScript也更简单：

＆＃13;

＆＃13;

// 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");
  });
});

＆＃13;

/* 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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;