切换到常见问题

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 (滑动开关)，我再次添加了相同的函数并替换了id添加了一个2，您可以在这个小提琴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');
    }
});