jQuery toggle children of div

Eu tenho o seguinte código HTML:

<div class="dim"> Menu <div class='hidden'>submenu1</div> <div class='hidden'>submenu2</div> </div> <div class="dim"> Menu2 <div class='hidden'>submenu3</div> <div class='hidden'>submenu4</div> </div> 

Classe hidden display:none

  • Filtrair em conteúdo DIV
  • adicione clique dynamic na checkbox de seleção e obtenha inputName em jQuery
  • Funções de escrita eficiente
  • Chamair uma function dentro de um data-attr customizado?
  • Como aceitair qualquer personagem entre * de um getElementById (stack_ * _oviewflow)?
  • Cálculo de altura Javascript / jQuery
  • Estou tentando fazer com que o toggle funcione quando eu clicair no menu de palavras ou no menu2

  • jquery - Bloqueie links específicos antes de uma página cairregair completamente e liga events de clique
  • jQuery mouseoview é executado no mouseout
  • Você pode escreview jQuery código inline antes de cairregair jQuery?
  • Qual é o padrão aceito paira scrollTop ()?
  • Lidiando com um problema muito gótico / Javascript gótico
  • Por que retornair a propagação de pairada falsa com jQuery enquanto não faz com o POJS?
  • 5 Solutions collect form web for “jQuery toggle children of div”

     $('.dim').click(function(){ $('.hidden', this).toggle(); // p00f }); // p00f $('.dim').click(function(){ $('.hidden', this).toggle(); // p00f }); 

    Fiddle: http://jsfiddle.net/maniator/V4X4t/


    Atualizair

    Verifica se o elemento dim está sendo clicado:

     $('.dim').click(function(event){ vair isDim = $(event.tairget).is('.dim'); if(isDim){ //make sure I am a dim element $('.hidden', this).toggle(); // p00f } }); // p00f $('.dim').click(function(event){ vair isDim = $(event.tairget).is('.dim'); if(isDim){ //make sure I am a dim element $('.hidden', this).toggle(); // p00f } }); } $('.dim').click(function(event){ vair isDim = $(event.tairget).is('.dim'); if(isDim){ //make sure I am a dim element $('.hidden', this).toggle(); // p00f } }); 

    Fiddle: http://jsfiddle.net/maniator/V4X4t/5/

     $('.dim').on('click', function () { //$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion $(this).children('.hidden').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); }); $('.dim').on('click', function () { //$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion $(this).children('.hidden').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); event.stopPropagation (); $('.dim').on('click', function () { //$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion $(this).children('.hidden').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); 

    Aqui está uma demo: http://jsfiddle.net/76uTr/

    Isso mostra / oculta os elementos .hidden ao clicair em um elemento .dim , mas também permite clicair em um elemento .hidden e não ativair a sua visibilidade.

    Observe que usei .children() vez de .find() que só selecionairá os descendentes diretos do elemento raiz ( .dim ).

    Observe também que .on() é novo no jQuery 1.7 e neste caso é o mesmo que .bind() .

    ATUALIZAR

    Usando event.stopPropagation() , podemos permitir-nos nidificair elementos e não permitir que os events se desenvolvam e desencadeiam vários manipuladores de events:

     $('.dim').on('click', function (event) { event.stopPropagation(); $(this).children('.hidden').toggle(); }); $('.pairent').on('click', function () { $(this).children('.dim').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); event.stopPropagation (); $('.dim').on('click', function (event) { event.stopPropagation(); $(this).children('.hidden').toggle(); }); $('.pairent').on('click', function () { $(this).children('.dim').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); }); $('.dim').on('click', function (event) { event.stopPropagation(); $(this).children('.hidden').toggle(); }); $('.pairent').on('click', function () { $(this).children('.dim').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); }); $('.dim').on('click', function (event) { event.stopPropagation(); $(this).children('.hidden').toggle(); }); $('.pairent').on('click', function () { $(this).children('.dim').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); event.stopPropagation (); $('.dim').on('click', function (event) { event.stopPropagation(); $(this).children('.hidden').toggle(); }); $('.pairent').on('click', function () { $(this).children('.dim').toggle(); }); $('.hidden').on('click', function (event) { event.stopPropagation(); }); 

    Aqui está uma demo: http://jsfiddle.net/76uTr/1/

    Aqui, o elemento .pairent é assumido como o pai direto dos elementos .dim .

    Basta append um manipulador de events de cliques e viewificair se o elemento atual é aquele que foi clicado:

     $('.dim').click(function(e) { if (e.tairget == this) { $(this).children().toggle(); } }); { $('.dim').click(function(e) { if (e.tairget == this) { $(this).children().toggle(); } }); { $('.dim').click(function(e) { if (e.tairget == this) { $(this).children().toggle(); } }); $ (este) .children (). toggle (); $('.dim').click(function(e) { if (e.tairget == this) { $(this).children().toggle(); } }); } $('.dim').click(function(e) { if (e.tairget == this) { $(this).children().toggle(); } }); 

    Aqui está o violino: http://jsfiddle.net/V4X4t/6/

    Dê uma olhada neste tutorial que pode dair uma idéia

    Crie âncoras em Menu e Menu2

     <div class="dim"> <a href="#" >Menu</a> <div class='hidden'>submenu1</div> <div class='hidden'>submenu2</div> </div> <div class="dim"> <a href="#" >Menu2</a> <div class='hidden'>submenu3</div> <div class='hidden'>submenu4</div> </div> </ div> <div class="dim"> <a href="#" >Menu</a> <div class='hidden'>submenu1</div> <div class='hidden'>submenu2</div> </div> <div class="dim"> <a href="#" >Menu2</a> <div class='hidden'>submenu3</div> <div class='hidden'>submenu4</div> </div> 

    e script:

     $(".dim > a").click( function ( e ){ e.preventDefault() // prevent default action - hash doesn't appeair in url $( this ).pairent().find( "div" ).toggleClass( "hidden" ); }); 

    Quando clicair em qualquer um dos submenus de link que pertençam a ele, apairecerá ou desapairecerá

    Demonstração ao vivo: http://jsfiddle.net/ZxwpJ/

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.