jQuery 当前容器上的手风琴 show/hide

Question

我为常见问题解答页面创建了一个手风琴，单击时我设法将 questions/answers 变为 show/hide，当您单击一个问题时，所有其他人都隐藏并打开当前问题。

唯一的问题是，如果您尝试关闭当前打开的问题，标题仍然突出显示，因为它仍被定义为当前问题。

我该如何解决这个问题？

看我的fiddle：https://jsfiddle.net/1cqk1540/1/

jQuery:

// Hide the answers (expanded content)
$(".content .accordion span").hide();

// On question click
$(".content .accordion .question").click(function(){
    // If the next element to the question is visible
    if(false == $(this).next().is(':visible')) {
        // Slide the answer up
        $('.content .accordion span').slideUp(300);
    }

    // Toggle the slide of the next element to the question
    $(this).next().slideToggle(300);

    // Remove current class from the previous accordion container
    $('.content .accordion.current').removeClass('current');

    // Remove current class from the current accordion container
    $(this).parent().addClass('current');
});

Answer 1

这是我改变的：

$('.content .accordion.current').not($(this).parent().toggleClass('current')).removeClass('current');

点击的是toggleClass功能，其他都是removeClass功能

演示：

// Hide the answers (expanded content)

$(".content .accordion span").hide();

// On question click

$(".content .accordion .question").click(function() {

  // If the next element to the question is visible

  if (false == $(this).next().is(':visible')) {

    // Slide the answer up

    $('.content .accordion span').slideUp(300);

  }

  // Toggle the slide of the next element to the question

  $(this).next().slideToggle(300);

  // Remove current class from the previous accordion container

  $('.content .accordion.current').not($(this).parent().toggleClass('current')).removeClass('current');

  // Remove current class from the current accordion container 

});

.accordion {
  border: 1px solid #666666;
  margin-bottom: 10px;
  padding: 10px
}

.accordion.current .question {
  color: #FF0000;
}

.accordion .question {
  color: #333333;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  display: block;
}

.accordion span {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="accordion">
    <a href="#q" class="question">Q1 Aenean varius tincidunt arcu?</a>
    <span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, ipsum id aliquet ornare, nibh leo luctus turpis, sed consectetur libero diam et est. In hac habitasse platea dictumst. Donec nibh arcu, porttitor at finibus id, consectetur ac nunc. Aenean varius tincidunt arcu, ac egestas quam posuere eu. Maecenas congue mollis mattis. Quisque sollicitudin lectus consectetur mi auctor, ac feugiat velit convallis.</p>
    </span>
  </div>
  <div class="accordion">
    <a href="#q" class="question">Q2 Aenean varius tincidunt arcu?</a>
    <span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, ipsum id aliquet ornare, nibh leo luctus turpis, sed consectetur libero diam et est. In hac habitasse platea dictumst. Donec nibh arcu, porttitor at finibus id, consectetur ac nunc. Aenean varius tincidunt arcu, ac egestas quam posuere eu. Maecenas congue mollis mattis. Quisque sollicitudin lectus consectetur mi auctor, ac feugiat velit convallis.</p>
    </span>
  </div>
</div>

Answer 2

您为每次点击添加 class.current。正确的代码 https://jsfiddle.net/xbh7bx02/

 if( !$( this ).parent().hasClass( 'current' ) )
    {
        $('.content .accordion.current').removeClass('current');
      // Remove current class from the current accordion container
      $(this).parent().addClass('current');
    } else {
        $('.content .accordion.current').removeClass('current');
      // Remove current class from the current accordion container
    }

jQuery 当前容器上的手风琴 show/hide

jQuery accordion show/hide on current container

jquery

accordion

show-hide