堆栈内存溢出
  繁体   English   中英

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

[英]How to find a particular class using JavaScript?

 原文  2016-06-15 07:54:50  8   4    javascript/ php/ html/ css

问题描述

我正在使用纯JavaScript创建手风琴。 Initailly我仅显示了第一部分的内容。 然后，通过使用JavaScript，我将在单击部分上显示内容。

这很好用，但是当我单击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>

4 个解决方案

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

您可以尝试如下操作：

逻辑：

  • 检查当前单击的部分是否打开或关闭并保存。 这将用于切换状态。
  • 隐藏所有打开的部分。
  • 如果当前部分可见，则不要执行任何操作。 如果没有，请显示出来。

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>

注意：我已经抽空更新了您的代码。

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

在检查了相关元素在循环内是否具有active类之后，请尝试删除该元素上的active类（如果有）。 注意，在此示例中，我已向第一个面板添加了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>

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

您为什么不只给自己的第一个小组课show而不是active ？ active类在您的代码中似乎是多余的。

第一个面板的代码： 

<div class="panel show">

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

如果要使用active类显示当前打开的面板，则一旦用户单击其他面板，也必须处理该移除。

下面的代码还确保只有一个活动面板。 所有其他将关闭。 （如果您不喜欢这种行为，只需删除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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 javascript 在数组中查找特定 object 的计数？ 如何使用 javascript 在 object 中查找特定类型的长度？ 如何使用javascript / jquery从iframe的特定类中读取值？ 如何使用javascript获取特定的子节点类名？ 如何使用jQuery通过ID查找特定的祖父母并通过某些类获取其特定孩子的价值 删除具有特定类名的元素（使用javascript）？ 如何找到具有特定样式的特定 class 的计数在 HTML 页面中重复 如何在JavaScript中查找表格中特定列的长度？ 如何在javascript中查找特定的特定属性 如何在Javascript中存储特定类的对象数组？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM