Question

我为FAQ页面创建了一个手风琴，我已经设法在点击时显示/隐藏显示/隐藏的问题/答案，当您点击其他所有隐藏的问题并打开当前问题时。

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

我该如何解决这个问题？

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

你为每一次点击添加类.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手风琴在当前容器上显示/隐藏

2 个答案: