滑动一次单击向下滑动 div

Question

我已经使用 jquery 完成了上滑和下滑 div。这里我有三个盒子。一旦我们点击头部，内容就会打开。然后单击另一个头，该内容将打开并关闭旧内容。但我继续关闭相同的内容。任何时候任何内容都是开放的。我需要一旦我们点击 head 内容就需要关闭。

$(document).ready(function() {
  $("p").click(function() {
    $this = $(this);
    var parent = $this.closest('.acc');
    $("p").removeClass('open');
    $this.addClass('open');
    $('.acc-body').slideUp();
    parent.find('.acc-body').slideDown();
  });
});

body {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.acc {
  padding: 0px;
  margin: 0;
}

.acc-head {
  padding: 15px;
  margin: 0;
  background: #ccc;
}

.acc-head.open {
  background: #000;
  color: #fff;
}

.acc-body {
  border: 1px solid #ccc;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width: 500px;">
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
</div>

Answer 1

要解决此问题，请在 .acc-body 上使用 slideToggle()，并使用 not() 将其从 slideUp() 中排除。相同的模式适用于在 p 元素上添加和删除 open 类。

$(document).ready(function() {
  $("p").click(function() {
    var $this = $(this);
    var $target = $this.next();
    
    $("p").not($this).removeClass('open');
    $this.toggleClass('open');
    
    $('.acc-body').not($target).slideUp();
    $target.slideToggle();
  });
});

body {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.acc {
  padding: 0px;
  margin: 0;
}

.acc-head {
  padding: 15px;
  margin: 0;
  background: #ccc;
}

.acc-head.open {
  background: #000;
  color: #fff;
}

.acc-body {
  border: 1px solid #ccc;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width: 500px;">
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
  <div class="acc">
    <p class="acc-head">
      head
    </p>
    <div class="acc-body">
      Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
  </div>
</div>

Answer 2

只需首先寻找拥有 open 类的负责人。

这样解决

$(document).ready(function(){
         $("p").click(function(){
            $this = $(this);
            if($this.hasClass('open')){
                $this.removeClass('open');
                $this.siblings('.acc-body').slideUp();
            }else{
                var parent = $this.closest('.acc');
                $("p").removeClass('open');
                $this.addClass('open');
                $('.acc-body').slideUp();
                parent.find('.acc-body').slideDown();
            }
        });
    });

希望对您有所帮助！ :)

Answer 3

这里是你的解决方案！！！

使用 Jquery hasClass() 函数我们可以解决这个问题。首先我们需要检查点击的元素是否有类。如果有'open'类，则执行slideup功能，否则执行slideDown功能。并删除其他'p'的所有开放类。

我们也使用 slideToggle() 来解决这个函数。

$(document).ready(function(){
 $("p").click(function(){
  $this = $(this);
  if($this.hasClass('open')){
    $this.removeClass('open');
    $('.acc-body').slideUp();
  }else{ 
    var parent = $this.closest('.acc');
    $('p').removeClass('open');
    $this.addClass('open')
    $('.acc-body').slideUp();
    parent.find('.acc-body').slideDown();
 }; 
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>

 body{
    padding: 0;
    margin: 0;
}
*, *:before, *:after{
    box-sizing: border-box;
}

.acc{
    padding: 0px;
    margin: 0;
}
.acc-head{
    padding: 15px;
    margin: 0;
    background: #ccc;
}
.acc-head.open{
    background: #000;
    color: #fff;
}
.acc-body{
    border: 1px solid #ccc;
    display: none;
}

</style>


<div style="max-width: 500px;">
<div class="acc">
    <p class="acc-head">
        head1
    </p>
    <div class="acc-body">
        Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
</div>


<div class="acc">
    <p class="acc-head">
        head2
    </p>
    <div class="acc-body">
        Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
</div>


<div class="acc">
    <p class="acc-head">
        head3
    </p>
    <div class="acc-body">
        Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    </div>
</div>

Answer 4

使用简单的手风琴：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<div class="accordion">Section 1</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="accordion">Section 2</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="accordion">Section 3</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>