jQuery bascule (cliquez pour afficher une division tout en cachant les autres)

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

Quand une div est basculée, j’aimerais que les autres div qui sont actuellement affichées se cachent, ne permettant ainsi qu’un seul div à la fois.

De plus, j’aimerais pouvoir cliquer à l’extérieur de l’élément pour masquer la div ouverte.

Juste pour clarifier les choses, j’ai fourni un exemple qui fait actuellement tout ce que je veux, sauf fermer un div lorsqu’il en ouvre un autre (fonctionnalité ouverte uniquement pour un div):

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

   Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3

En gros, vous avez juste besoin de cacher toutes les divs sauf celle qui est basculée:

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

   Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3

Je l’ai fait le plus court possible! Bonne codage!

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

Vous pouvez utiliser un moyen simple et intelligent pour implémenter en utilisant le code ci-dessous:

  Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3

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

   Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3
 
 
 
  Options   Item 1
 Item 2
 Item 3

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

DEMO

Voici:

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

Notez la ligne ajoutée:

 $(".dropdown-container").hide();

Nous cachons simplement toutes les choses avant de basculer la div que nous voulons.

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

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