Jquery alternar (Haga clic para mostrar un div mientras oculta otros)

Question

La idea básica es que tengo un montón de div en el que cada uno se puede alternar (mostrar/ocultar).

Cuando se alterna un div, me gustaría que otros divs se oculten, permitiendo que solo se muestre un solo div a la vez.

Además, me gustaría poder hacer clic fuera del elemento para ocultar el div abierto también.

Solo para aclarar las cosas proporcioné un ejemplo que actualmente hace todo lo que quiero excepto cerrar un div al abrir otra (solo una funcionalidad de div abierto a la vez).

http://jsfiddle.net/walker2238/NFTFw/27/

Actualización: Problema resuelto gracias por las sugerencias y tomar el tiempo para que me ayude a cabo.

Answer 1

resuelve en http://jsfiddle.net/NFTFw/29/

Es, básicamente, sólo tiene que ocultar todos los divs excepto el que se alternará.

Answer 2

Este código debería ser el truco, sin el uso de bibliotecas adicionales. :)

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

Answer 3

ver este violín ...

http://jsfiddle.net/SDaCu/1/

Answer 4

Aquí van:

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

Nota la línea añadido:

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

Acabamos de ocultar todas las cosas antes de alternar el div que queremos.

Answer 5

intente lo siguiente:

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

Answer 6

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

Answer 7

me hizo tan corto como sea posible! Feliz codificación!

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

Demostración: http://jsfiddle.net/NFTFw/60/

Answer 8

Se puede utilizar a modo inteligente y fácil de implementar mediante el uso de abajo Código:

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

---

$(document).ready(function(){ 
 

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

 
});

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

Ejemplo de trabajo Enlace: http://jsfiddle.net/NFTFw/1901/