如何在 jQuery 中编写手风琴式 JavaScript

Posted 2023-05-09

【中文标题】如何在 jQuery 中编写手风琴式 JavaScript

【英文标题】：How to write accordion JavaScript in jQuery

【发布时间】：2021-03-09 05:51:51

【问题描述】：

我是初学者，在将手风琴 javascript 代码编写到 jQuery 时遇到问题。

这是我的 JavaScript 代码

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

for (i = 0; i < acc.length; i++) 
  acc[i].addEventListener("click", function() 
    this.classList.toggle("active");  
  );

这是我尝试过的 jQuery

$(".accordion").each(function(index) 
    $(index).click(function() 
        $(this).slideToggle("slow")
    )
)

我试过了，但没有用。有人知道怎么解决吗？

【问题讨论】：

尝试切换类而不是slideToggle

【参考方案1】：

你可以用这个

$(".acc").on("click", function() 
  $('.acc>p').hide("slow"); // hide all
  $(this).find("p").show("slow"); /// show content
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="acc">
  <p style="height: 60px; background: lime; display:none;">Hello World</p>
  <button>Change color</button>
</div>
<div class="acc">
  <p style="height: 60px; background: lime; display:none;">Hello World</p>
  <button>Change color</button>
</div>

【讨论】：

我冒昧地用你的代码做了一个sn-p。您不需要链接到 Fiddle。

【参考方案2】：

没有必要使用 jQuery 循环遍历元素，它会为你做的；）

$('.accordion').on('click',function()
    $(this).slideToggle("slow");
);

就是这样！