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

Question

I am creating a accordion with use of pure JavaScript. 我正在使用纯JavaScript创建手风琴。 Initailly I have shown content of only first section. Initailly我仅显示了第一部分的内容。 Then by using JavaScript I am showing content on clicking sections. 然后，通过使用JavaScript，我将在单击部分上显示内容。

This works well but when I click on section1 it does not hide because active class is still there. 这很好用，但是当我单击section1时它不会隐藏，因为active class仍然存在。

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

Answer 1

You can try something like this: 您可以尝试如下操作：

Logic: 逻辑：

Check if current clicked section is open or close and save it. 检查当前单击的部分是否打开或关闭并保存。 This will be use to toggle state. 这将用于切换状态。
Hide all open sections. 隐藏所有打开的部分。
If current section is visible, don't do anything. 如果当前部分可见，则不要执行任何操作。 If not, show it. 如果没有，请显示出来。

JSFiddle JSFiddle

 function registerEvents() { var sections = document.querySelectorAll(".main"); for (var i = 0; i < sections.length; i++) { sections[i].addEventListener("click", toggleSection) } } function toggleSection(e) { var ele = e.target.nextElementSibling; var isNotVisible = ele.className.indexOf("active") < 0; hideAllPanels(); if (isNotVisible) addClass(ele, "active"); } function hideAllPanels() { var panels = document.querySelectorAll(".panel.active"); for (var i = 0; i < panels.length; i++) { panels[i].className = panels[i].className.replace("active", ""); } } function addClass(el, _class) { el.className += " " + _class; } (function init() { registerEvents(); })()

 .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; }

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

Note: I have taken leisure to updated your code. 注意：我已经抽空更新了您的代码。

Answer 2

After checking if the element in question has a class of active within the loop, try removing the active class on that element if it does. 在检查了相关元素在循环内是否具有active类之后，请尝试删除该元素上的active类（如果有）。 Note, I've added an id to the first panel for this example. 注意，在此示例中，我已向第一个面板添加了ID。

 var acc = document.getElementsByClassName("main"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ var active = document.getElementById("one").nextElementSibling; if(active.classList.contains("active") == true) { active.classList.remove("active"); } this.nextElementSibling.classList.toggle("show"); } }

 .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; }

 <div id="one" 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>

Answer 3

why don't you just give your first panel class show instead of active ? 您为什么不只给自己的第一个小组课show而不是active ？ active class seems redundant in your code. active类在您的代码中似乎是多余的。

code for the first panel: 第一个面板的代码：

<div class="panel show">

Answer 4

If you're to use the active class to show the currently opened panel, then you have to also handle it's removal once the user clicks on other panels. 如果要使用active类显示当前打开的面板，则一旦用户单击其他面板，也必须处理该移除。

The code below also ensures that there can only be one active panel. 下面的代码还确保只有一个活动面板。 All the others will be closed. 所有其他将关闭。 ( If you don't like the behavior , simply remove the for-loop. ) （如果您不喜欢这种行为，只需删除for循环即可。）

 <!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(){ var el_id = this.innerHTML; if( ! this.nextElementSibling.classList.contains("active") ){ this.nextElementSibling.classList.add("active"); this.nextElementSibling.classList.add("show"); }else{ this.nextElementSibling.classList.remove("active"); this.nextElementSibling.classList.remove("show"); } for( var el = 0; el < acc.length; el++ ){ if( acc[el].innerHTML != el_id ){ if(acc[el].nextElementSibling.classList.contains("active")){ acc[el].nextElementSibling.classList.remove("active"); acc[el].nextElementSibling.classList.remove("show"); } } } } } </script> </body> </html>

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

问题描述

4 个解决方案

解决方案1
2 2016-06-15 08:25:03

Logic: 逻辑：

解决方案2
1 2016-06-15 08:02:03

解决方案3
1 已采纳 2016-06-15 08:03:17

解决方案4
1 2016-06-15 08:33:41

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

问题描述

4 个解决方案

解决方案1 2 2016-06-15 08:25:03

Logic: 逻辑：

解决方案2 1 2016-06-15 08:02:03

解决方案3 1 已采纳 2016-06-15 08:03:17

解决方案4 1 2016-06-15 08:33:41

解决方案1
2 2016-06-15 08:25:03

解决方案2
1 2016-06-15 08:02:03

解决方案3
1 已采纳 2016-06-15 08:03:17

解决方案4
1 2016-06-15 08:33:41