el menú desplegable no está oculto cuando hago clic en el exterior

Este es mi guión. El script funciona cuando hago clic, pero no se oculta cuando hago clic en el exterior.

$(document).ready(function() {
   //Translate();  //caling Language Translater function
   $("#translate_image").attr('href', base_url)

   $("#select_lang").click(function() {
      $("#lang_visible").attr('style', 'visibility: visible');
   })
})

Aquí está mi HTML:

<li>
    <div class="clsCurrent_Lan ">
        <a class="clsHead_Link_Bg" href="#" id="select_lang">
            <span>Select Language</span>
        </a>
    </div>
    <ul id="lang_visible" >
        <?php foreach($language_drops as $lang){?>
            <li>
              <a href="<?php echo admin_url('home/ch_language/' . 
                 $lang->language_code)?>"
                 id="<?php echo $lang->language_code?>">
                 <?php echo ucfirst($lang->language_name);?></a>
            </li>
        <?php }?>
    </ul>
</li>

preguntado el 01 de febrero de 12 a las 22:02

Edita tu publicación. Necesita una línea vacía antes del código. -

¿Puedes decirme por qué esto no funciona?

¿Qué debería estar oculto? #lang_visible? ¿En qué estás haciendo clic en "fuera" que esperas que oculte el elemento? -

Quiero ocultar el menú desplegable cuando está inactivo. -

3 Respuestas

$(document).mouseup(function(e) {
  if ($(e.target).parents('#select_lang').length === 0) {
    $("#lang_visible").attr('style', 'visibility: hidden');
  }
});

Trata eso. Agréguelo dentro de su documento listo para llamar. Básicamente, hacer clic en cualquier lugar además del selector #select_lang hará que se oculte la visibilidad de #lang_visible.

Respondido 02 Feb 12, 04:02

Creo que estás haciendo esto de manera incorrecta, como reinventar la rueda. Entonces, ¿el comportamiento que desea es tener un control donde el usuario pueda seleccionar un idioma entre varios idiomas diferentes? En lugar de intentar rodar el suyo, ¿por qué no utilizar el elemento "Seleccionar"? Puede usar php para configurar el "Seleccionar" inicialmente, y luego usar javascript / jQuery para responder a los cambios de estado.

Respondido 02 Feb 12, 03:02

Entonces, ¿algo como esto entonces?

$(document).ready(function () {
    //Translate(); //calling Language Translater function
    $("#translate_image").attr('href',base_url);
    $("#select_lang").click(function () {
        $("#lang_visible").attr('style','visibility: visible').click(function (e) {
            $(this).hide(); //hides the #lang_visible element
            //$(this).parent().hide(); //to hide the <li> containing the #lang_visible element
            e.preventDefault();
            return false;
        });
    });
});

Respondido 04 Feb 12, 23:02

¿Podrías publicar algún marcado html? Esto puede ayudarnos a identificar el problema. - pete

Ok, actualice el código de la respuesta original para ocultar el menú desplegable en su evento de cambio. Déjanos saber si eso funciona para ti. - pete

Me di cuenta de que estas usando li y a elementos para su "menú desplegable" ahora (en lugar de un select y option). Respuesta modificada, háganos saber si funciona para usted. - pete

sí, usé li y un elemento. ahora cambio el script. ahora funciona bien. - Bruno Thileeban

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.