jquery 隐藏活动的手风琴内容

Question

我正在实现基本的 jquery 手风琴，如果打开手风琴内容，则同时执行向上滑动和向下滑动操作。它应该只隐藏（向上滑动）内容 div。需要别人的帮助。

$(document).ready(function() {
  $("h3").click(function() {
    if ($(".accordion-content").is(":visible")) {
      $(".accordion-content").slideUp(600);
      $("span.plusminus").text("+");
    }
    $(this).next(".accordion-content").slideDown(600);
    $(this).find("span.plusminus").text("-");
  });
});

h3 {
  background: #ccc;
  padding: 10px;
}
.accordion-content {
  display: none;
  height: 50px;
}
.plusminus {
  float: right;
}

<div class="accordion_container">
  <h3>Lorem Ipsum<span class="plusminus">+</span></h3>
  <div class="accordion-content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <h3>Lorem Ipsum<span class="plusminus">+</span></h3>
  <div class="accordion-content">
    <p>Works fine</p>
  </div>
  <h3>Lorem Ipsum<span class="plusminus">+</span></h3>
  <div class="accordion-content">
    <p>Works fine</p>
  </div>
</div>

Answer 1

你可以的，

$("h3").click(function() {
  if ($(".accordion-content").is(":visible")) {
    $(".accordion-content").not($(this).next()).slideUp(600);
    $("span.plusminus").text("+");

  }
  $(this).next(".accordion-content").slideToggle(600);
  $(this).find("span.plusminus").text("-");
});

Fiddle

对当前点击的元素使用SlideToggle()。
对除当前元素之外的所有元素使用 slideUp()。

修复图标

$("h3").click(function() {
  var icon = $(this).find("span.plusminus");
  $(".accordion-content").not($(this).next()).slideUp(600);
  $("span.plusminus").not(icon).text("+");
  $(this).next(".accordion-content").slideToggle(function() {
    if ($(this).is(":visible")) {
      icon.text("-");
    } else {
      icon.text("+");
    }
  });
});

Edited Fiddle

Answer 2

我会这样做：

$(document).ready(function(){
 $('.plusminus').click(function(e){
  e.preventDefault();
  if (!$(this).hasClass('open')){
    $(this).addClass('open');
    $(".accordion-content").slideDown(600);
  }else{
    $(this).removeClass('open');
    $(".accordion-content").slideUp(600);
  }
 });
}

jquery 隐藏活动的手风琴内容

jquery hide the active accordion content

jquery

jquery-ui-accordion