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()用于当前的cliked元素。
使用除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("+"); } }); });。

修复图标

{{1}}

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隐藏了活跃的手风琴内容

2 个答案: