Afficher/masquer div on click en utilisant jQuery pour créer un "menu clic"

Je suis nouveau sur jQuery et j'ai besoin d'aide pour afficher et masquer un div sur clic. Fondamentalement, j'ai besoin de montrer un div (contenant un petit menu) une fois que l'utilisateur clique sur un lien, et dès que l'utilisateur clique sur un lien à l'intérieur de la div juste montré. Ou clique en dehors de la div j'ai besoin de cacher à nouveau la div.mon HTML ressemble à ceci (j'existerai dans beaucoup d'endroits sur la page).Afficher/masquer div on click en utilisant jQuery pour créer un "menu clic"

<a class="menu" href="#">Menu</a> 
<div class="menu-content" style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;"> 
<div><a href="#">Menu option 1</a></div> 
<div><a href="#">Menu option 2</a></div> 
</div>

J'ai aussi une div qui enveloppe toute la page que je pensais que je serais mis un autre clic-événement sur pour cacher la div (pour attraper des clics en dehors du menu réel).

Est-ce la bonne approche pour résoudre ce problème et comment puis-je supprimer les gestionnaires sur le div diviseur, etc, Que dois-je penser d'autre pour bien faire (si c'est la bonne approche)?

Mise à jour: Sur la base de la réponse acceptée ci-dessous j'ajouté à résoudre

//Need to return false here, otherwise the event will bubble up and trigger the hide on body 
$('.menu').click(function() { $('.menu-content').hide();$(this).next().show();return false; }); 
$('body, .menu-content a').click(function() { $('.menu-content').hide();}); 
$('.menu-content a').click(function() { alert($(this)); });

Source

2009-03-03 Riri

html: 

<a class="menu" href="#">Menu</a> 
<div class='a_menu' style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;"> 
<div><a href="#">Menu option 1</a></div> 
<div><a href="#">Menu option 2</a></div> 
</div> 

script: 

$('.menu').click(function() { $(this).next('.a_menu').show(); }); 
$('body, .a_menu a').click(function() { $('.a_menu').hide(); });

Je prolly remplacer les < A> tags avec SPANS à la place de style avec « curseur: pointeur »

Source

2009-03-03 07:11:14

Cela ne fonctionnera pas quand je l'ai à plusieurs endroits dans la page – Riri

mighta a aidé si vous aviez dit que dans votre Q - vous pouvez affiner le code i fourni avec le contexte et les filtres sur sélecteurs pour gérer tous les menus sur votre page –

@ Scott: J'ai fait ... "J'existerai dans beaucoup d'endroits sur la page". Et dans votre code, vous ne cachez le menu que sur un clic sur le lien réel ... Pas en dehors du menu. – Riri

Jetez un oeil à suckerfish et listamatic. Ce que vous essayez d'atteindre peut être résolu par CSS seulement. En outre, vous aurez acquis un aperçu sur la façon de faire votre navigation d'une manière plus sémantique.

Ensuite, vous pouvez plonger dans jQuery pour des choses qui ne peuvent pas être fait en HTML + CSS simple.

Source

2009-03-03 07:06:39 cherouvim

Bons articles mais ce n'est pas du tout ce que je recherche. Ne pas gérer click et utilise le javascript standard pour commencer ... – Riri

Le script résout simplement l'incapacité de IE6 à: survoler autre chose que le sien. – cherouvim

Sur la base de la question et les réponses ci-dessus, je suis en mesure de simplifier le code jquery pour obtenir quelque chose plus proche de ce dont j'avais besoin. Le HTML est moche, et il y a une barre de menu complète ici pour mettre le menu déroulant en contexte.

<html> 
<head> 
    <style> 
#menu { 
} 

#menu ul { 
    margin: 0; 
    padding: 8px 0px 0px 0px; 
    list-style: none; 
    line-height: normal; 
} 

#menu li { 
    display: block; 
    float: left; 
} 

#menu a,#menu span { 
    display: block; 
    float: left; 
    height: 28px; 
    background: #34579D; 
    margin-right: 3px; 
    padding: 8px 15px 0px 15px; 
    letter-spacing: -1px; 
    text-decoration: none; 
    text-align: center; 
    text-transform: lowercase; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    color: #FFFFFF; 
} 

#menu .drop-menu { 
    cursor: pointer; 
} 

#menu li ul { 
    display: none; 
    position: absolute; 
    margin-top: 31px; 
} 

#menu li ul li { 
    background: #FFFFFF; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #FFFFFF; 
} 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    //Need to return false here, otherwise the event will bubble up and trigger the hide on body 
    $(document).ready(function() { 
    $('.drop-menu').click(function() { 
     $('.drop-menu-content').toggle(); 
     return false; 
    }); 
    $('body, .drop-menu-content span').click(function() { 
     $('.drop-menu-content').hide(); 
    }); 
    }); 
    //]]> 
    </script> 
</head> 
<body> 
    <div id="menu"> 
    <ul> 
     <li><a href="/" class="first">Home</a></li> 
     <li><a href="/order_report.html" class="value">Order Computer Calculated Value Report</a></li> 
     <li><a href="/php/order_appraisal.php">Order An Appraisal</a></li> 
     <li class="current_page_item"><span class="drop-menu">Sample Reports</span> 
     <ul class="drop-menu-content"> 
      <li><a target="_blank" href="/documents/value_check.pdf">Computer Calculated Report ($20)</a></li> <br /> 
      <li><a target="_blank" href="/documents/desktop.pdf">Computer Desk Top Appraisal ($45)</a></li> <br /> 
      <li><a target="_blank" href="/documents/exterior.pdf">Desk Top/Drive by Appraisal ($95)</a></li> 
     </ul> 
     </li> 
     <li><a href="/FAQ.html">FAQ</a></li> 
     <li><a href="/about_us.html">About Us</a></li> 
     <li><a href="/php/contact.php">Contact Us</a></li> 
     <li> 
     <div class="menu-content"> 
     <ul> 
      <a href="/php/contact.php">Contact Us</a> 
     </ul> 
     </div> 
     </li> 
    </ul> 
    </div> 
</body> 
</html>

Source

2011-07-27 00:02:06 Justin

j'ai eu problème avec bcz je n'étais pas de retour faux: cette réponse parfaite. Merci –

Afficher/masquer div on click en utilisant jQuery pour créer un "menu clic"

Répondre

Questions connexes