Question

所有我使用纯accordion创建javascript。我最初只展示了第一部分的内容。然后使用javascript我在点击部分时显示内容。这很有效，但是当我点击第1部分时它不会隐藏，因为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

您可以尝试这样的事情：

逻辑：

检查当前点击的部分是打开还是关闭并保存。这将用于切换状态。
隐藏所有打开的部分。
如果当前部分可见，请勿执行任何操作。如果没有，请显示它。

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>

注意：我已经悠闲地更新了您的代码。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

为什么不提供第一个小组课程show而不是active？ active类在您的代码中似乎是多余的。

第一个面板的代码：

<div class="panel show">

Answer 4

如果您要使用active课程来显示当前打开的面板，那么一旦用户点击其他面板，您还必须将其删除。

下面的代码还确保只能有一个活动面板。所有其他人将被关闭。 （如果你不喜欢这种行为，只需删除for循环。）

＆＃13;

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

＆＃13;

如何使用javascript查找特定课程？

4 个答案:

逻辑：