La bascule manuelle jQuery ne fonctionne pas

Question

J'essaie de créer une bascule manuelle pour masquer certaines balises div. Mais ça ne semble pas faire quoi que ce soit. J'ai ajouté des alertes pour voir si elles se présentent même, mais en vain. En utilisant le simple toggle(); La fonction fonctionne.

En fait, je suis en train d'essayer de montrer comment afficher ou masquer tous les divs. Parce que pour l'instant, si certaines divs sont ouvertes et que certaines divs sont fermées, utiliser toggle permet de les inverser (donc les divs sont cachés, et les divs cachés sont maintenant affichés). Des idées?

//button to show/hide rows 
    $('#hideRows').live('click', function() { 
     $('.dragbox').each(function(){ 
      //$(this).find('.dragbox-content').toggle(); 
      $(this).find('.dragbox-content').toggle(
       function() { 
        //$(this).css({"display":"none"}); 
        alert("hide"); 
       }, 
       function() { 
        //$(this).css({"display":"block"}); 
        alert("show"); 
       } 
      ); 
     }); 
    }); 

Answer 1

Si vous avez quelque chose comme:

<div id='div1'></div> 
<div id='div2'></div> 
<div id='div3'></div> 
<div id='div4'> 
    <div id='div5'></div> 
</div> 

et css comme:

.hideDiv 
{ 
    display: none; 
} 

Vous pouvez faire des choses comme

$('#div1').addClass('hideDiv'); //hides the div 
$('#div2').toggle('hideDiv');// toggles hidden or not hidden 
$('#div4').children('div').addClass('hideDiv');// hides the child 

Mettez ces fonctions, sélecteurs complexes ou tout ce dont vous avez besoin:

$('#div3').hover(
     function() 
     { 
      $('#div1').addClass('hideDiv'); 
     }, 
     function() 
     { 
      $('#div1').removeClass('hideDiv'); 

     } 
    ); 

Pour l'amusement, bascule deux divs basé sur le vol stationnaire d'un autre:

$('#div3').hover( 
     function() 
     { 
      $('#div1').addClass('hideDiv'); 
      $('#div2').removeClass('hideDiv'); 

     }, 
     function() 
     { 
      $('#div1').removeClass('hideDiv'); 
      $('#div2').addClass('hideDiv'); 
     } 
    ); 

REMARQUE pour une autre option .toggle() devient .toggleClass() pour cela.

Answer 2

Vous semblez relier le pseudo-gestionnaire d'événements toggle encore et encore. Essayez ceci:

$('.dragbox .dragbox-content').toggle(
    function() { 
     $(this).css({"display":"none"}); 
    }, function() { 
     $(this).css({"display":"block"}); 
}); 

$('#hideRows').live('click', function() { 
    $('.dragbox .dragbox-content').click(); 
});