单击一次slideup div

时间：2019-01-23 11:11:29

标签： javascript jquery

我已经使用jquery完成了slideup和slidedown div。我在这里有三个框。单击标题后，内容将打开。然后单击另一个标题，该内容将打开，而旧内容将关闭。但是我继续关闭相同的内容。任何时候都打开任何内容。一旦单击标题，我需要关闭内容。

$(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>

4 个答案:

答案 0 :(得分：2)

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

$(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>

答案 1 :(得分：1)

首先要寻找拥有类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();
            }
        });
    });

希望有帮助！ ：）

答案 2 :(得分：1)

这是您的解决方案！!!!

使用Jquery hasClass（）函数，我们可以解决此问题。首先，我们需要检查clicked元素是否具有类。如果具有“打开”类，则执行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>

答案 3 :(得分：0)

使用简单手风琴：

.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>
mvn clean install -pl !Parent2

相关问题
最新问题