向下滑动以获取常见问题解答

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（幻灯片），我再次添加了相同的功能，并替换了添加2的ID，您可以在此提琴中看到它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');
    }
});