手风琴菜单-如何在单击一个按钮时停止所有按钮的打开？

如何解决手风琴菜单-如何在单击一个按钮时停止所有按钮的打开？

是否有一种简单的方法来适应下面的代码，以便仅单击按钮即可运行下面的slideDown / slideUp代码？我的HTML下方有5个按钮。

我知道代码不是理想的，但是我是一个初学者，并且正在测试中，因此我想改写以下内容，以便在受到质疑时可以为其辩护

HTML：

<div class="accordion">   
<button type= "button" class="question">
<p>This is a question</p>
</button>
</div>  
<div class="answer">
<p>This is the answer</p>
</div>

JavaScript

$('.question').on('click',function(){
  
  if ($('.answer').is(':visible')) {
    $('.answer').slideUp()
  } else {
    $('.answer').slideDown()
  }
})

解决方法

您必须指定哪个答案

$('.question').on('click',function(){
    let answer = $(this).siblings('.answer') 
    //Or depend on the position find() closest() next()
    if (answer.is(':visible')) {
        answer.slideUp()
    } else {
        answer.slideDown()
    }
})

事实上，现在我看到了结构-最好的方法是为问题设置数据ID属性，并为答案类设置答案-1。 选择器将被设为answer = $（'。answer-'+ $（this）.data（'id'））

,

现在有点老了，但是如果对寻求答案的人有所帮助，这是我使用的代码：

$('button').on('click',function() {

  const $answer = $(this).parent().next() 
  const $triangle = $(this).find('p') 
  if ($answer.is(':visible')) {
    $answer.slideUp()
    $triangle.text("\u25BC")
  } else {
    $answer.slideDown()
    $triangle.text("\u25B2")
  }
})