Jquery Afficher Masquer Fonction

J'utilise la fonction jQueryJquery Afficher Masquer Fonction

function ShowHide(){ 
    $(".login").animate({"height": "toggle"}, { duration: 1000 }); 
}

et le lien pour montrer cacher la div .login est:

onclick="ShowHide(); return false;"

Mais ce lien permet de basculer seulement le div pour afficher et masquer , mais je veux qu'il se cache aussi quand l'utilisateur clique sur le div, j'ai un wrapper de page en place, mais j'ai juste besoin d'aide avec jQuery.

Source

2009-10-25 chris

vous devez mettre l'élément event sur body pour le cacher, si vous voulez que l'utilisateur clique partout ailleurs pour le cacher. Ps: s'il vous plaît, n'utilisez pas onclick dans les éléments html! - gestionnaire d'événements d'utilisation dans jquery pour que (. Par exemple STH dans les lignes de addEvent (cliquez, fonction))

Source

2009-10-25 10:52:25 dusoft

Pourriez-vous s'il vous plaît fournir un exemple de balisage pour cela? – chris

Vous voulez quelque chose comme $ ('# myLink') .cliquez sur (ShowHide); –

Je m'excuse car je suis très nouveau à Jquery et je suis au stade débutant, et je comprends que l'utilisation d'onlick en html est une mauvaise pratique, et j'apprécierais vraiment, si vous pouviez me montrer un exemple de la méthode des meilleures pratiques, merci beaucoup – chris

<html> 
    <head> 
    <script type="text/javascript" src="jquery-1.3.2.js"></script> 
    <style> 
     .login-div { width: 100px; height: 100px; margin:auto; border: solid 1px black; position: relative; background-color: #aeaeae; display:none;} 
     .parent-div { width: 300px; height: 300px; margin:auto; border: solid 1px #aeaeae; position: relative;} 
     .footer { margin-bottom: 0px; margin-top:auto; margin-left:auto; margin-right:auto; height:40px; width:200px; position:relative; display:none;} 
    </style> 
    <script> 
     $(window).load(function(){ 
      var DEBUG = 0; 
      var count = 0; 
      $('.parent-div').bind('click', function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       DEBUG==1?console.log('Target: '+$(e.target).attr('class')):''; 
       DEBUG==1?console.log('Show Hide: '+(count++)):''; 
       //ShowHide(); 
       var target_class = $(e.target).attr('class'); 
       if(target_class == 'link'){ 
        $(".login-div").animate({"height": "toggle"}, { duration: 1000 }); 
        $('.footer').toggle(); 
       } 
       else{ 
        $(".login-div").animate({"height": "hide"}, { duration: 1000 }); 
        $('.footer').hide(); 
       } 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
     <div class="parent-div">Parent Box:<br/> 
      <a href="#" class="link">ShowHide</a> 
      <div class="login-div">Child Box:</div> 
      <div class="footer">click out side the gray box & inside the Parent-box 
     </div> 
    </body> 
</html>

Je bricolé ci-dessus en fonction de ma compréhension de vos besoins, consultez le code. Cela devrait faire votre travail. Ici, j'utilise l'événement "click" bouillonnant dans le script java et ai un écouteur d'événement lié à l'élément de classe parent-div. ce même peut être attaché à <body/> si la portée des éléments doit être augmentée.

Source

2009-10-25 14:49:34 Ajaxe

Si vous utilisez firebug & FF vous pouvez définir DEBUG = 1 – Ajaxe

la propagation et la propagation d'événements se compliquent, si vous avez plusieurs événements onclick sur la page et attachez l'événement onclick sur le corps, mais l'exemple devrait vous aider. – dusoft

Je suis d'accord avec dusoft, aller plus haut sur le DOM se traduira par plus d'appels au gestionnaire 'click' sur 'body', aussi quelque part en 'bouillonnant' sur l'un des éléments enfants peut event.stopPropagation() ' Le gestionnaire requis n'est jamais appelé et DIV en question ne cache jamais/montre. Les chaînes de traitement des événements doivent être prises en compte. – Ajaxe

MÊME PLUS FACILE

Plutôt que d'établir un div spécifique de cliquer sur pour cacher l'élément, vous pouvez simplement mettre en place tous les éléments qui ne font pas partie de l'élément à cacher « me montrer » quand on clique dessus sur.

Exemple de ce que je veux dire, dans votre section javascript, sous votre code prêt lieu comme suit:

$("body *").not('.login, .login *').fadeOut(1000); 
// This tells jquery to get all elements, in the body, not containing the 
//  class login or any subelement of it 
// The fade out is just a simple jquery hide animation set to 1 second in this 
//  example but you can hide it however you want

et voir comment cela fonctionne pour toi.

Source

2012-02-21 23:45:13 SpYk3HH

Jquery Afficher Masquer Fonction

Répondre

Questions connexes