JavaScript无法打开/关闭手风琴。

huangapple
go评论104阅读模式
英文:

Javascript not opening/closing accordion

问题

我尝试了几种不同的方法，但无法确定为什么我的JS不能打开和关闭我的手风琴。请检查我的代码。您的帮助将不胜感激。

  1. var acc = document.getElementsByClassName("accordion");
  3. var i;
  5. for (i = 0; i < acc.length; i++) {
  6.   acc[i].addEventListener("click", function() {
  8.     this.classList.toggle("active");
  10.     var panel = this.nextElementSibling;
  11.     if (panel.style.display === "block") {
  12.       panel.style.display = "none";
  13.     } else {
  14.       panel.style.display = "block";
  15.     }
  16.   });
  17. }
  1. <div class="wrap1">
  2.   <button class="accordion">About Us Page Map</button>
  4.   <div id="pan1" class="panel">
  5.     <p>
  6.       <a href="About.html" id="ppl">Personel section</a><br />
  7.       <a href="About.html" id="ach">Acheivments</a><br />
  8.       <a href="About.html" id="his">History</a><br />
  9.     </p>
  10.   </div>
  11. </div>
  1. body {
  2.     text-align: center;
  3.     background-color: #ffffff;
  4. }
  6. h1 {
  7.     font: 40px courier new;
  8.     text-align: center;
  9. }
  10. a {
  11.     font: 25px arial;
  12.     text-align:center;
  13. }
  15. .accordion {
  16.     background-color: #eee;
  17.     color: #444;
  18.     cursor: pointer;
  19.     padding: 18px;
  20.     width: 60%;
  21.     text-align: center;
  22.     border: none;
  23.     outline: none;
  24.     transition: 0.4s;
  26. }
  27. .active, .accordion:hover {
  28.     background-color: #ccc;
  29. }
  31. .panel {
  32.     padding: 0 18px;
  33.     background-color: white;
  34.     overflow: hidden;
  35.     font: 16px Source Sans Pro;
  36.     width:60%;
  37.     margin:0 auto;
  38.     display:none;
  39.     height:200px auto
  41. }
  43. p{
  44.     text-align:center;
  45. }

我已添加了CSS，我确实有一个名为“accordion”的类，但在原始问题中没有显示，对不起！

英文:

I've tried a few different ways but can not tell why my.JS isn't opening and closing my accordion. Please check my code. Your help would be appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var acc = document.getElementsByClassName(&quot;accordion&quot;);
  3. var i;
  5. for (i = 0; i &lt; acc.length; i++) {
  6.   acc[i].addEventListener(&quot;click&quot;, function() {
  8.     this.classList.toggle(&quot;active&quot;);
  11.     var panel = this.nextElementSibling;
  12.     if (panel.style.display === &quot;block&quot;) {
  13.       panel.style.display = &quot;none&quot;;
  14.     } else {
  15.       panel.style.display = &quot;block&quot;;
  16.     }
  17.   });
  18. }

/*this javascript seems to be fine and matches what some answers have said, and i've reset the page cache but i cannot seem to get it to work */
<!-- language: lang-html -->

  1. &lt;div class=&quot;wrap1&quot;&gt;
  2.   &lt;button class=&quot;accordion&quot;&gt;About Us Page Map&lt;/button&gt;
  4.   &lt;div id=&quot;pan1&quot; class=&quot;panel&quot;&gt;
  5.     &lt;p&gt;
  7.       &lt;a href=&quot;About.html&quot; id=&quot;ppl&quot;&gt;Personel section&lt;/a&gt;&lt;br /&gt;
  8.       &lt;a href=&quot;About.html&quot; id=&quot;ach&quot;&gt;Acheivments&lt;/a&gt;&lt;br /&gt;
  9.       &lt;a href=&quot;About.html&quot; id=&quot;his&quot;&gt;History&lt;/a&gt;&lt;br /&gt;
  10.     &lt;/p&gt;
  11.   &lt;/div&gt;
  12. &lt;/div&gt;

<!-- language: lang-css -->

  1. body {
  2.     text-align: center;
  3.     background-color: #ffffff;
  4. }
  6. h1 {
  7.     font: 40px courier new;
  8.     text-align: center;
  9. }
  10. a {
  11.     font: 25px arial;
  12.     text-align:center;
  13. }
  15. .accordion {
  16.     background-color: #eee;
  17.     color: #444;
  18.     cursor: pointer;
  19.     padding: 18px;
  20.     width: 60%;
  21.     text-align: center;
  22.     border: none;
  23.     outline: none;
  24.     transition: 0.4s;
  26. }
  27. .active, .accordion:hover {
  28.     background-color: #ccc;
  29. }
  31. .panel {
  32.     padding: 0 18px;
  33.     background-color: white;
  34.     overflow: hidden;
  35.     font: 16px Source Sans Pro;
  36.     width:60%;
  37.     margin:0 auto;
  38.     display:none;
  39.     height:200px auto
  40.     
  41. }
  43. p{
  44.     text-align:center;
  45. }

<!-- end snippet -->
I've added the css, i do have a class called accordion but it didn't show in the original question sorry!

答案1

得分: 1

问题在这里：

  1. var acc = document.getElementsByClassName("accordion");

你的HTML文件中没有一个名为 "accordion" 的类，这就是为什么它无法识别它。你需要创建一个按钮，给它分配一个名为 "accordion" 的类，然后它就能正常工作了。

  1. <button class="accordion">Personal</button>
  2. <div class="panel">
  3.   <p>Personal here</p>
  4. </div>
  6. <button class="accordion">Achievements</button>
  7. <div class="panel">
  8.   <p>Achievements here</p>
  9. </div>
  11. <button class="accordion">History</button>
  12. <div class="panel">
  13.   <p>History here</p>
  14. </div>

希望这有所帮助。

英文:

The problem is here:

  1. var acc = document.getElementsByClassName(&quot;accordion&quot;);

You don't have "accordion" class in your HTML file, that's why it is not able to recognize it. You have to take a button, assign it a class named accordion and then it will work properly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var acc = document.getElementsByClassName(&quot;accordion&quot;);
  3. var i;
  5. for (i = 0; i &lt; acc.length; i++) {
  6.   acc[i].addEventListener(&quot;click&quot;, function() {
  8.     this.classList.toggle(&quot;active&quot;);
  11.     var panel = this.nextElementSibling;
  12.     if (panel.style.display === &quot;block&quot;) {
  13.       panel.style.display = &quot;none&quot;;
  14.     } else {
  15.       panel.style.display = &quot;block&quot;;
  16.     }
  17.   });
  18. }

<!-- language: lang-css -->

  1. .accordion {
  2.   background-color: #eee;
  3.   color: #444;
  4.   cursor: pointer;
  5.   padding: 18px;
  6.   width: 100%;
  7.   border: none;
  8.   text-align: left;
  9.   outline: none;
  10.   font-size: 15px;
  11.   transition: 0.4s;
  12. }
  14. .active,
  15. .accordion:hover {
  16.   background-color: #ccc;
  17. }
  19. .panel {
  20.   padding: 0 18px;
  21.   display: none;
  22.   background-color: white;
  23.   overflow: hidden;
  24. }

<!-- language: lang-html -->

  1. &lt;button class=&quot;accordion&quot;&gt;Personal&lt;/button&gt;
  2. &lt;div class=&quot;panel&quot;&gt;
  3.   &lt;p&gt;Personal here&lt;/p&gt;
  4. &lt;/div&gt;
  6. &lt;button class=&quot;accordion&quot;&gt;Achievements&lt;/button&gt;
  7. &lt;div class=&quot;panel&quot;&gt;
  8.   &lt;p&gt;Achievements here&lt;/p&gt;
  9. &lt;/div&gt;
  11. &lt;button class=&quot;accordion&quot;&gt;History&lt;/button&gt;
  12. &lt;div class=&quot;panel&quot;&gt;
  13.   &lt;p&gt;History here&lt;/p&gt;
  14. &lt;/div&gt;

<!-- end snippet -->

Source: HTML and CSS Accordion - w3schools

Hope this helps.

答案2

得分: 0

我建议重构一些你的代码，以使其更易读，比如

HTML

  1. &lt;a href=&quot;#item1&quot; class=&quot;accordion&quot;&gt;项目1&lt;/a&gt;
  2. &lt;div id=&quot;item1&quot; class=&quot;accordion-content&quot;&gt;这是我的折叠项1内容&lt;/div&gt;
  4. &lt;a href=&quot;#item2&quot; class=&quot;accordion&quot;&gt;项目2&lt;/a&gt;
  5. &lt;div id=&quot;item2&quot; class=&quot;accordion-content&quot;&gt;这是我的折叠项2内容&lt;/div&gt;

JS

  1. document.querySelectorAll(&quot;.accordion&quot;).forEach(function(node) {
  2.     node.addEventListener(&quot;click&quot;, function(e) {
  3.         this.nextElementSibling.toggleClass(&quot;active&#39;);
  4.     });
  5. });

CSS

  1. .accordion-content:not(.active) {
  2.     display: none;
  3. }

除了重构之外，我无法看到一个具有类名 accordion 的元素。看起来你缺少包含实际 折叠项 的HTML。

英文:

I would suggest refactoring some of your code to make it more readable such as

HTML

  1. &lt;a href=&quot;#item1&quot; class=&quot;accordion&quot;&gt;Item 1&lt;/a&gt;
  2. &lt;div id=&quot;item1&quot; class=&quot;accordion-content&quot;&gt;This is my accordion Item 1 content&lt;/div&gt;
  4. &lt;a href=&quot;#item2&quot; class=&quot;accordion&quot;&gt;Item 2&lt;/a&gt;
  5. &lt;div id=&quot;item2&quot; class=&quot;accordion-content&quot;&gt;This is my accordion Item 2 content&lt;/div&gt;

JS

  1. document.querySelectorAll(&quot;.accordion&quot;).forEach(function(node) {
  2.     node.addEventListener(&quot;click&quot;, function(e) {
  3.         this.nextElementSibling.toggleClass(&quot;active&#39;);
  4.     });
  5. });

CSS

  1. .accordion-content:not(.active) {
  2.     display: none;
  3. }

Besides the refactor, I'm unable to see an element with the className accordion. It seems you are missing the HTML containing the actual accordion.

huangapple
  • 本文由 发表于 2020年1月3日 15:44:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/59574897.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定