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

Question

是否有一种简单的方法来调整下面的代码，以便只有单击的按钮才会运行下面的 slideDown / slideUp 代码？我有 5 个带有下方 html 的按钮。

我知道代码并不理想，但我是初学者，它是为了测试，所以我想修改下面的代码，以便在被质疑时进行辩护

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()
  }
})

Answer 1

您必须指定答案

$('.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()
    }
})

事实上，现在我看到了结构 - 最好的方法是将 data-id 属性设置为问题和答案 class = answer answer-1。选择器将让 answer = $('.answer-' + $(this).data('id'))

Answer 2

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

$('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")
  }
})

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

Accordion menu - how to stop all buttons opening when one is clicked?

javascript

accordion