如何使用JavaScript查找特定类？_Javascript_Php_Html_Css

如何使用JavaScript查找特定类？

javascript php html css

如何使用JavaScript查找特定类？,javascript,php,html,css,Javascript,Php,Html,Css,我正在使用纯JavaScript创建一个手风琴。最初我只展示了第一部分的内容。然后，通过使用JavaScript，我在单击部分时显示内容这很好，但是当我点击section1时，它并没有隐藏，因为活动的类仍然存在 <!DOCTYPE html> <html> <head> <style> .main { background-color: #eee; width:350px; color: #444; padd

我正在使用纯JavaScript创建一个手风琴。最初我只展示了第一部分的内容。然后，通过使用JavaScript，我在单击部分时显示内容

这很好，但是当我点击section1时，它并没有隐藏，因为

活动的类仍然存在
<!DOCTYPE html>
<html>
<head>
<style>
.main {
    background-color: #eee;
    width:350px;
    color: #444;   
    padding: 18px;  
    border: none;
    text-align: left;
    font-size: 15px;

}

.main.active,.main:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
   background-color: white;
   display:none;
   width:350px;


}
.active{
    display: block !important;

}

div.panel.show {
    display: block;
}
div.panel.hide {
    display: none;
}
</style>
</head>
<body>
<div class="main">Section 1</div>
<div class="panel active">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="main">Section 2</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="main">Section 3</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("main");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){    
      this.nextElementSibling.classList.toggle("show");     
  }
}
</script>

</body>
</html>


梅因先生{
背景色：#eee；
宽度：350px；
颜色：#444；
填充：18px；
边界：无；
文本对齐：左对齐；
字体大小：15px；
}
.main.active，.main:悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
显示：无；
宽度：350px；
}
.主动{
显示：块！重要；
}
div.panel.show{
显示：块；
}
div.panel.hide{
显示：无；
}
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
var acc=document.getElementsByClassName（“main”）；
var i；
对于（i=0；i
检查相关元素是否在循环中有一个活动的类后，如果有，请尝试删除该元素上的活动的类。注意，对于这个例子，我已经在第一个面板中添加了一个id

var acc=document.getElementsByClassName（“main”）；
var i；
对于（i=0；i

.main{
背景色：#eee；
宽度：350px；
颜色：#444；
填充：18px；
边界：无；
文本对齐：左对齐；
字体大小：15px；
}
.main.active，.main:悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
显示：无；
宽度：350px；
}
.主动{
显示：块！重要；
}
div.panel.show{
显示：块；
}
div.panel.hide{
显示：无；
}
第1节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
检查相关元素是否在循环中有一个活动的类后，如果有，请尝试删除该元素上的活动的类。注意，对于这个例子，我已经在第一个面板中添加了一个id

var acc=document.getElementsByClassName（“main”）；
var i；
对于（i=0；i

.main{
背景色：#eee；
宽度：350px；
颜色：#444；
填充：18px；
边界：无；
文本对齐：左对齐；
字体大小：15px；
}
.main.active，.main:悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
显示：无；
宽度：350px；
}
.主动{
显示：块！重要；
}
div.panel.show{
显示：块；
}
div.panel.hide{
显示：无；
}
第1节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
你为什么不给你的第一个面板类show
而不是active
<代码>活动
类在代码中似乎是多余的
第一个面板的代码：
<div class="panel show">

你为什么不给你的第一个面板类show
而不是active
<代码>活动
类在代码中似乎是多余的
第一个面板的代码：
<div class="panel show">

您可以尝试以下方法：
逻辑：

检查当前单击的部分是否打开或关闭并保存。这将用于切换状态