向下滑动以查看常见问题解答

Question

我正在尝试在博客上设置一个常见问题解答页面，但一直在努力使代码正确无误。这是我想要做的 > http://jsfiddle.net/qwL33/

实际上一切都很好，但是当点击第一部分（假设这是问题 1）时，它打开了两个部分（意味着两个问题）。帮助。

代码如下：

    $('#slidetoggle')
      .on('click', function(e) {
        jQuery('.slider').toggle('slideDown');
      });

<div id="slidetoggle">HELLO 1</div>
<div class="slider" style="display: none">Hello there!</div>

<div id="slidetoggle">HELLO 2</div>
<div class="slider" style="display: none">Hello there!</div>

Answer 1

到目前为止这不是最好的选择，但你的问题是你正在复制相同的 ID (slidetoggle)，我再次添加了相同的功能并替换了添加 2 的 id，你可以在这里看到它fiddle https://jsfiddle.net/sw5ohfqv/ 最好的方法是创建一个关闭所有可见项的函数，然后打开单击的项。

   $('#slidetoggle2')
.on('click', function(e){
    var $this = $(this),
        $slider = $('.slider'),
        isOpened = $slider.is(':visible');

    if (isOpened)
    {
        $slider.slideUp();
        $this.text('show fields');
    }
    else
    {
        $slider.slideDown();
        $this.text('hide fields');
    }
});

向下滑动以查看常见问题解答

Toggle slide down for faqs

javascript

toggle

slidedown

toggleclass