1
votes

glissement une fois cliquez sur div glissé vers le bas

J'ai fait glisser vers le haut et glisser vers le bas avec jquery. Ici, j'ai trois cases.Une fois que nous cliquons sur la tête, le contenu s'ouvre. puis cliquez sur une autre tête, ce contenu s'ouvrira et l'ancien contenu se fermera. Mais je cont fermer le même contenu. À tout moment, l'un des contenus est ouvert. Une fois que nous cliquons sur la tête, j'ai besoin que le contenu se ferme.

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

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;
}

$(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();
  });
});

javascript jquery

0 commentaires

4 Réponses :

2
votes

Pour résoudre ce problème, utilisez slideToggle () sur .acc-body , et utilisez not () pour l'exclure du slideUp () . Le même modèle fonctionne pour ajouter et supprimer la classe open sur les éléments p .

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

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;
}

$(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();
  });
});

0 commentaires

1
votes

Cherchez d'abord la tête propriétaire de la classe open .

Correction du problème comme ceci

$(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();
            }
        });
    });

J'espère que cela aide! :)

0 commentaires

1
votes

Voici la solution pour vous !!!

En utilisant la fonction Jquery hasClass (), nous pouvons résoudre ce problème. Nous devons d'abord vérifier que l'élément cliqué a une classe ou non. si a une classe 'open' alors faites la fonction slideup, sinon faites la fonction slideDown et supprimez toutes les classes ouvertes pour les autres 'p'.

nous résolvons cette fonction en utilisant slideToggle () également.

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

$(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();
 }; 
  });
});

2 commentaires

Veuillez prendre le temps de décrire quels sont les problèmes et pourquoi cette solution est utile. N'oubliez pas que nous sommes là pour éduquer les gens, pas seulement pour leur envoyer du code.

Bien sûr @RoryMcCrossan

0
votes

Utilisez un accordéon simple:

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

.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;
}

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";
    }
  });
}

2 commentaires

Si vous allez copier le code , je suggérerais que W3Schools est à peu près à la dernière place vous voudriez copier compte tenu des faibles normes de certains de leurs exemples.

Oui c'est bien pour moi.