如果其他div有相同的class，如何输入一个div的样式并修改它？

Question

I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside 'accordion' to modify the display from block to none.我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。

I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside 'accordion' to modify the display from block to none.我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。 I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside 'accordion' to modify the display from block to none.我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。 I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside 'accordion' to modify the display from block to none.我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。

Code Pin Here代码别针在这里

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | FAQ Accordion Card</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>
  <img class="imgback" src="/design/desktop-design.jpg" alt="">
  <div class="container">
    
    <img src="images/illustration-box-desktop.svg" alt="" class="box__svg">
    
    <div class="sub__container">

      <img src="images/bg-pattern-desktop.svg" alt="" class="bg__svg">
      <img src="images/illustration-woman-online-desktop.svg" alt="" class="women__svg">
      

      <div class="faq">

        <h1 class="faq__tittle">FAQ</h1>

        <div class="accordion__container">

          <div class="accordion">

            <div class="accordion__tittle">
              <h4 class="tittle">How many team members can I invite?</h4>
              <img src="./images/icon-arrow-down.svg" alt="" class="arrow">
            </div>
            <div class="accordion__content">
              <p >You can invite up to 2 additional users on the Free plan. There is no limit on 
                team members for the Premium plan.</p>
            </div>

          </div>

          <hr>
  
          <div class="accordion">

            <div class="accordion__tittle">
              <h4 class="tittle">What is the maximum file upload size?</h4>
              <img src="./images/icon-arrow-down.svg" alt="" class="arrow">
            </div>
            <div class="accordion__content">
              <p>No more than 2GB. All files in your account must fit your allotted storage space. 
            </p>
            </div>

          </div>
          
          <hr>
          
          <div class="accordion">

            <div class="accordion__tittle">
              <h4 class="tittle">How do I reset my password?</h4>
              <img src="./images/icon-arrow-down.svg" alt="" class="arrow">
            </div>            
            <div class="accordion__content">
              <p>Click “Forgot password” from the login page or “Change password” from your profile 
                A reset link will be emailed to you.</p>
            </div>

          </div>
          
          <hr>

          <div class="accordion">

            <div class="accordion__tittle">
              <h4 class="tittle">Can I cancel my subscription?</h4>
              <img src="./images/icon-arrow-down.svg" alt="" class="arrow">
            </div>            
            <div class="accordion__content">
              <p>Yes! Send us a message and we’ll process your request no questions asked.</p>
            </div>
                        
          </div>

          <hr>

          <div class="accordion">

            <div class="accordion__tittle">
              <h4 class="tittle">Do you provide additional support?</h4>
              <img src="./images/icon-arrow-down.svg" alt="" class="arrow">
            </div>
            <div class="accordion__content">
              <p>Chat and email support is available 24/7. Phone lines are open during normal</p>
            </div>
            
          </div>

          <hr>

        </div>

      </div>
    </div>
  </div>
 
  


  <script>
var acc = document.getElementsByClassName("accordion");


for (let i = 0; i<acc.length; i++){

    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        
        
        /* var panel = this.nextElemenSibling;
        console.log(panel);
        if(panel.style.display === "block"){
            panel.style.display = "none";
        }
        else{
            panel.style.display = "block";
        }  */
    
    });
    
}
</script>
</body>
</html>

Answer 1

You're looking for this.children[1] in your JS to target the accordions child with the class of accordion__content您正在您的 JS 中寻找this.children[1]以使用手风琴__content 的 class 来定位accordion__content子项

Then you can create a class that will add a display of none to the accordion__tittle elements, adding by default in the HTML.然后您可以创建一个 class，它将向accordion__tittle元素添加无显示，默认情况下添加到 HTML。 Use JS to toggle it on the click event listener.使用 JS 在点击事件监听器上切换它。

I did not clean up your CSS just show you how to add/remove using the conditional you have already written.我没有清理您的 CSS 只是向您展示如何使用您已经编写的条件添加/删除。

Alternatively you can just write the conditional to check if the el.style.display = block then add/remove like you did in your code pin.或者，您可以只编写条件来检查el.style.display = block ，然后像您在代码 pin 中所做的那样添加/删除。

NOTE : I removed all the other html and CSS to just focus on your question.注意：我删除了所有其他 html 和 CSS 以专注于您的问题。

 const acc = document.getElementsByClassName("accordion") // much cleaner JS for (let i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active") this.children[1].classList.toggle('display-none') // toggle the class.display-none no conditional needed }) }

 * { margin: 0; padding: 0; box-sizing: border-box; }.attribution { font-size: 11px; text-align: center; }.attribution a { color: hsl(228, 45%, 44%); } /*ACCORDION*/ /* Added this class to use for toggling display of none to your accordian elements */.display-none { display: none; }.accordion__container { padding-top: 20px; padding-right: 15%; }.accordion { cursor: pointer; display: flex; flex-direction: column; justify-content: center; height: 3.5rem; width: 100%; }.active.accordion { background: green; }.accordion__tittle { position: relative; font-size: 0.9rem; font-weight: 700; }.arrow { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); }.accordion__content { height: 40px; width: 90%; padding-top: 10px; font-size: 0.8rem; font-weight: 400; }.active { background-color: seagreen; } hr { opacity: 0.7; }.attribution { position: absolute; bottom: 0; }

 <div class="accordion__container"> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">How many team members can I invite?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">What is the maximum file upload size?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>No more than 2GB. All files in your account must fit your allotted storage space.</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">How do I reset my password?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">Can I cancel my subscription?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>Yes. Send us a message and we'll process your request no questions asked?</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">Do you provide additional support.</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p> </div> </div> <hr> </div>

Answer 2

To select all the elements with the same class:到 select 所有具有相同 class 的元素：

 const accordions = document.querySelectorAll('.accordion');

This is a NodeList, kind of the same as an array which has index start from 0. If you want to select the first accordion, then:这是一个 NodeList，类似于索引从 0 开始的数组。如果你想 select 第一个手风琴，那么：

 const youAccordion = accordions[0];

and so on.等等。

Answer 3

You must get this.lastElementChild property in click handler function, your function will be:您必须在点击处理程序 function 中获取 this.lastElementChild 属性，您的 function 将是：


....
acc[i].addEventListener("click", function() {
        this.classList.toggle("active");        
        //var panel = this.nextElementSibling;//
        var panel = this.lastElementChild;
        console.log(panel);
        if(panel.style.display === "block"){
            panel.style.display = "none";
        }
        else{
            panel.style.display = "block";
        }
 });
....

如果其他div有相同的class，如何输入一个div的样式并修改它？

问题描述

3 个解决方案

解决方案1
0 2021-05-22 01:12:42

解决方案2
0 2021-05-22 02:22:48

解决方案3
0 2021-05-22 02:39:08

如果其他div有相同的class，如何输入一个div的样式并修改它？

问题描述

3 个解决方案

解决方案1 0 2021-05-22 01:12:42

解决方案2 0 2021-05-22 02:22:48

解决方案3 0 2021-05-22 02:39:08

解决方案1
0 2021-05-22 01:12:42

解决方案2
0 2021-05-22 02:22:48

解决方案3
0 2021-05-22 02:39:08