jQuery bascule (Cliquez pour afficher un div, tout en cachant les autres)

L'idée de base est que j'ai un tas de div dans lequel chacun peut être basculé (afficher/masquer).

Quand un div est basculé j'aimerais que d'autres div qui sont actuellement affichés à cacher, donc uniquement en permettant à un seul div pour être affiché à la fois.

En outre, je tiens à être en mesure de cliquer à l'extérieur de l'élément à masquer l'open div ainsi.

Juste pour rendre les choses plus claires, j'ai fourni un exemple qui fait actuellement tout ce que je veux à l'exception de la fermeture d'un div lors de l'ouverture d'un autre (un Seul div ouvert à la fois la fonctionnalité):

JS:

$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $("div.dropdown-container", $dropdown).toggle();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Ne accordéon faire ce que vous voulez? jqueryui.com/demos/accordion
Des sons comme ça, sauf qu'il n'a pas de fermeture automatique lorsque vous cliquez sur un autre.
Il y a un paramètre pour que, permettez-moi de le trouver.
Désolé, l'accordéon est un peu beaucoup pour ce que je suis à la recherche pour. Je préfère le garder est léger sans avoir besoin de plug-ins.
Ma réponse va faire tout ce que vous avez demandé, sans fermer le menu lorsque vous cliquez sur un élément de menu (qui d'autres réponses ont manqué...).

InformationsquelleAutor walker2238 | 2012-08-02

jquery toggle

En gros, vous avez juste besoin de masquer tous les divs à l'exception de celui basculé:

JS:

$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $div = $("div.dropdown-container", $dropdown);
      $div.toggle();
      $("div.dropdown-container").not($div).hide();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

C'est buggy, encore. Si vous cliquez sur un élément de menu, il va fermer le menu...
Je crois que ce comportement avait été prévu à l'origine. Je pensais qu'il dit expressément, mais sa question ne fait pas spécifier.
Ah, d'accord. Pas de soucis, qui fait sens!
Explosion des Pilules est correct. Désolé pour la confusion, j'aurais été plus clair lors de la rédaction de la question au lieu de simplement ajouter l'exemple.

InformationsquelleAutor Explosion Pills

Essayez ce qui suit:

$(document).ready(function(){

  $("a.dropdown-link").click(function(e) {
    e.preventDefault();
    var $div = $(this).next('.dropdown-container');
    $(".dropdown-container").not($div).hide();
    if ($div.is(":visible")) {
        $div.hide()
    }  else {
       $div.show();
    }
});

   $(document).click(function(e){
       var p = $(e.target).closest('.dropdown').length
       if (!p) {
          $(".dropdown-container").hide();
       }
   });

});

DÉMO

Cela a fonctionné pour moi. Je vous remercie.

InformationsquelleAutor undefined

Je l'ai fait aussi court que possible! Amusez-vous bien!

$(document).ready(function(){
  $(document).on("click", "a", function(event){
    $(this).siblings().show()
    $(this).parent().siblings().each(function(index,element){
       $(element).find(".dropdown-container:visible").hide();
    });
  });
});

Démo: http://jsfiddle.net/NFTFw/60/

InformationsquelleAutor Dom

Vous pouvez utiliser par intelligent et facile à mettre en œuvre par l'aide de code ci-dessous :

<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

JS:

$(document).ready(function(){

 $(".dropdown-link").click(function(){
 $(".dropdown-container").slideUp('slow')
 $(this).closest('.dropdown').find('.dropdown-container').slideDown('slow');
 
 });

});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

De travail exemple de Lien : http://jsfiddle.net/NFTFw/1901/

InformationsquelleAutor SantoshK

0

Ici, vous allez:
```
$("a.dropdown-link", $dropdown).click(function(e) {
  e.preventDefault();
  $(".dropdown-container").hide();
  $("div.dropdown-container", $dropdown).toggle();
  return false;
});
```
Note l'ajout d'une ligne:
```
$(".dropdown-container").hide();
```
Nous venons de masquer toutes les choses avant le basculement de la div que nous voulons.
- Ensuite, vous ne pouvez pas cliquer sur le lien d'un div pour la refermer.
InformationsquelleAutor Henrik Volckmer

    $(document).ready(function(){

      $('div.dropdown').each(function() {
        var $dropdown = $(this);

        $("a.dropdown-link", $dropdown).click(function(e) {
          e.preventDefault();
          $("div.dropdown-container").hide();
            if($("div.dropdown-container", $dropdown).hide()){
                $("div.dropdown-container", $dropdown).show();
            }else{
                $("div.dropdown-container", $dropdown).hide();
            }
          return false;
        });

    });

      $('html').click(function(){
        $("div.dropdown-container").hide();
      });

    });

http://jsfiddle.net/NFTFw/40/

Vous ne pouvez pas cliquer sur un ouvert div lien pour le fermer de nouveau; le .hide() vérifier d'abord et ensuite la fortune choix ne permet pas de résoudre ce problème.

InformationsquelleAutor Akam

Ce code devrait faire l'affaire, sans l'utilisation de bibliothèques supplémentaires. 🙂

http://jsfiddle.net/NFTFw/42/

$(document).ready(function(){

  var dd = $(".dropdown-container");

  $("a.dropdown-link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    dd.hide();
    $(this).next().show();
  });

  $(document).click(function() {
    dd.hide();
  });

  dd.click(function(e) {
    e.stopPropagation();
  });
});

Vous ne pouvez pas cliquer sur un ouvert div lien pour le fermer à nouveau avec votre solution.

InformationsquelleAutor Matthew Blancarte

Vous devez vous connecter pour publier un commentaire.