jquery AIDE avec toggle

Question

okay donc j'ai un bouton de connexion sur le dessus de mon site qui, lorsqu'on clique, appelle un certain jquery pour afficher/masquer une boîte de connexion.

Pourtant, j'ai un champ de recherche à côté de lui et lorsque vous cliquez sur ce ne sont pas seulement en mesure de taper mais il active également la boîte de connexion le premier code devrait être le jquery et le secong est la partie html ça l'appelle. btw sa jquery 1.4.2. Si vous souhaitez le voir, vous pouvez visiter http://www.stat-me.com et cliquez sur connexion et aussi en essayant de cliquer sur la recherche bo

MERCI.

JQUERY:

<script src="js/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
// run the function below once the DOM(Document Object Model) is ready 
$(document).ready(function() { 
    // trigger the function when clicking on an assigned element 
    $(".toggle").click(function() { 
     // check the visibility of the next element in the DOM 
     if ($(this).next().is(":hidden")) { 
      $(this).next().slideDown(); // slide it down 
     } else { 
      $(this).next().slideUp("fastS"); // hide it 
     } 
    }); 

$(".exito").click(function() { 
     // check the visibility of the next element in the DOM 
     if ($(this).next().is(":hidden")) { 
      $(this).next().show(); // slide it down 
     } else { 
      $(this).next().hide(); // hide it 
     } 
    }); 
}); 
</script> 

HTML:

<span class="toggle" style="margin-top:-583px; margin-left:950px; position:relative;"> 

<a href="#">LOG IN</a> 

</span> 


<div class="secondehiddendiv"> 
<div class="chat-bubble"> 
    <h1 style="color:#F00">LOG IN!</h1> 
<form name="login" method="post" action="login.php"> 
    <table style="margin-left:-5px; text-align:right; color:#F00;"> 
    <tr> 
    <td>Email:</td> 
     <td><input name="email" type="text" size="17" ></td> 
    </tr> 
    <tr> 
    <td>Password:</td> 
     <td><input name="password" type="password" size="17" ></td> 
    </tr> 
    </table> 

    <div class="log_in_img"> 
    <input type="image" src="http://www.stat-me.com/images/log_in_jq.png" alt="LOG IN" > 
    </div> 
</form> 

    <div class="chat-bubble-arrow-border"></div> 
    <div class="chat-bubble-arrow"></div> 

</div> 
</div> 

Answer 1

Votre durée de bascule prolonge devant la boîte de recherche:

---

Vous pouvez le fixer en ajoutant une largeur de 50px à votre bascule (comme vous l'avez fait), ou mieux encore (comme suggéré Patrick) ajouter dans le tableau correspondant:

<td> 
    <span class="toggle"> 
    <a href="#">LOG IN</a> 
    </span> 
</td> 

Answer 2

Votre durée .toggle est située au bas de la page, et positionnée vers le haut/droite avec des marges énormes.

Pourquoi adopter cette approche? Pourquoi ne pas le placer dans la même table où les éléments que vous voulez cliquer? La raison pour laquelle cela ne fonctionne pas, c'est que l'élément span doit être affiché en tant qu'élément block, ce qui signifie que sa largeur s'étend automatiquement à la largeur de ses parents, et couvre donc le bouton de recherche ainsi que le login bouton.