Javascript 两个事件，一次单击，无jquery

我最近一直在学习事件和事件冒泡，我试图用一点代码来测试自己，我已经有了一个我无法处理的小父亲

我想做的是当一个

被点击时，它会向下切换以显示一个扩展部分。当你点击这个

时，我想激活一个动画图标。我知道每个事件都是单独发生的，但我对JS还是相当陌生，不太确定如何检查

是否发生或

this=true

，确保也发生了

如果有人有任何建议，或者可以指导我进一步的教程，那将是非常棒的

原始代码：

HTML

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

 };

---

除了顺序有点混乱之外，它似乎工作得很好->它们彼此独立地工作得很好。如果你点击动画加号，它们都能工作，但如果你只点击幻灯片部分，它们就不能工作。我想做的是让它以两种方式工作，但我似乎做不到。好吧，那么你试着这样做->因为这只是几行代码，你可以查看上面的方法，了解它们在那里做什么除了顺序有点混乱之外，它似乎工作得很好->它们彼此独立地工作得很好。如果你点击动画加号，它们都能工作，但如果你只点击幻灯片部分，它们就不能工作。我想做的是让它双向工作，但我似乎做不到。好吧，那么你试着这样做->因为这只是几行代码，你可以在上面查找方法并了解它们在那里做什么

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

//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";

 };