Question

我最近一直在学习事件和事件冒泡，我试图用一些代码来测试自己，而且我已经踩到了一个比我能处理的小父亲。

我尝试做的是当点击一个<div>时，它会向下切换以显示扩展部分。当您点击此<div>时，我想激活一个动画图标。我已经知道了，所以每个事件都是单独发生的，但我对JS来说还是一个新手，并且我不太确定如何检查<this>是否发生或this=true，确保这也发生了。

Here is the code on JS Fiddle

如果有人有任何指示，或者可以指导我进一步的教程那么棒。

原始代码：

HTML

<div id="slideSection1">
<div class="nav-icon">
   <div class="line"></div>
</div>
</div>

CSS：

 .nav-icon {
 height: 77px;
 width: 77px;
 position: relative;
 top:-10px;}

.line {
height: 6px;
width: 55px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: black;
transition: .8s;}

.line::before {
height: 55px;
width: 6px;
background: black;
position: absolute;
top: 0;
left: 0;
content: "";
transition: .3s;}

.nav-icon.active .line {
transform: rotate(360deg);}

.nav-icon.active .line::before {
transform: rotate(90deg);}

.nav-icon {
height: 77px;
width: 77px;
position: relative;}

.line {
height: 6px;
width: 55px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: black;
transition: .8s;}

.line::before {
height: 55px;
width: 6px;
background: black;
position: absolute;
top: -24px;
left: 25px;
content: "";
transition: .3s;}

.nav-icon.active .line {
transform: rotate(360deg);}

.nav-icon.active .line::before {
transform: rotate(90deg);}

 #slideSection1 {
 height: 60px;
 width: auto;
 border: 1px solid black;
 margin-top: 10px;
 margin-left: 0;
 overflow: hidden;
 border-radius: 2px;
 transition: height 500ms ease;
 -moz-transition: height 500ms ease;
 -ms-transition: height 500ms ease;
 -o-transition: height 500ms ease;
 -webkit-transition: height 500ms ease;}

JavaScript的：

//animated icon

 function toggleactive(toggle) {
 toggle.addEventListener("click", function() {

     if (this.classList.contains("active") === true) {
       this.classList.remove("active");
     } else {
       this.classList.add("active");
     }
   });
 }
 //--------------------------------------------------------------------//

 var slideSection1 = document.getElementById("slideSection1");
 var obj = document.querySelectorAll('.nav-icon');

 for (var i = obj.length - 1; i >= 0; i--)
 {
   var toggle = obj[i];
    toggleactive(toggle);
 };


 slideSection1.onclick = function() {
   this.style.height == "60px" ? this.style.height = "150px" :   
 this.style.height = "60px";

 };

两个事件，一次点击，没有jquery

0 个答案: