¿Cómo ocultar el menú desplegable cuando el usuario hizo clic fuera del menú desplegable?

I have tried below code , but it's not working 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    $('#menu').click(function(){
        if($('#menu_list').css('display')=='none')
            $('#menu_list').show();
        else
        $('#menu_list').hide();
    });
    $('#menu_list').click(function(){
        $('#menu_list').hide();
    }
    );
});
</script>
<style>
#menu_list li:hover{
    background:#C9C;
}
#menu{
    position:relative;
    z-index:3;
}
#menu_list{
    background:#C90;
    width:30px;
    list-style:none;
    position:absolute;
    z-index:4;
}
#menulist li{
    padding:3px;
}
</style>
<body>
<input type="button" id="menu" value="drop" />
    <div id="menu_list">
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
    </div>
</body>

i have tried using layer but when i am using layer then for another drop down i have to click TWO time to activate . so how to achieve this in 1 clock . 2nd Attempt When there exist more than 1 drop down menu .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var hide  = ['#list1','#list2'];
$(document).ready(function(e) {

    $('#a').click(function (){
        if($('#list1').css('display')=='none'){ 
            $('#list1').show();
            $('#close').show();
        }
        else {
        $('#close').hide();
        $('#list1').hide();
        }
    });

    $('#close').click(function(){
        for(i=0;i<hide.length;i++){
            $(hide[i]).hide();
        }
        $('#close').hide();
    });

     $('#b').click(function(){
        if($('#list2').css('display')=='none'){
            $('#list1').hide();
            $('#list2').show();
            $('#close').show();
        }
        else {
        $('#list2').hide();
        $('#close').hide();
        }
    });
});
</script>
<style>
#menu_list li:hover{
    background:#C9C;
}
#menu{
    position:relative;
    z-index:3;
}
.menu_list{
    background:#C90;
    width:30px;
    list-style:none;
    position:absolute;
    z-index:4;
    display:none;
}
#menulist li{
    padding:3px;
}
#close{
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    z-index:3;
    display:none;
}
.l{
    float:left;
    position:relative;
}
</style>
<body>
<div id="close">
</div>
<div class="l">
    <input type="button" class="menu" id="a" value="drop1" />
    <div class="menu_list" id="list1">
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
    </div>
</div>
<div class="l">
    <input type="button" class="menu" value="drop2" id="b"/>
    <div class="menu_list" id="list2">
            <li>b</li>
            <li>b</li>
            <li>b</li>
            <li>b</li>
    </div>
</div>    
</body>

preguntado el 28 de mayo de 14 a las 12:05

can you provide fiddle for that -

jsbin.com/qesah/1 fiddle. -

4 Respuestas

You dont have to use that much of code for the purpose, use like this,

$(".menu").click(function (e) {
    e.stopPropagation();
    $(".menu_list").hide();
    $(this).next().show();

});
$(document).click(function (e) {

    $(".menu_list").hide();
});

De demostración

Editar

LA event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

In the above code, I've written code for both document haga clic y .menu click. Since .menu is in the document itself, when i click on .menu, there will generate the click event of document too. Which will hide $(".menu_list"). So I need to prevent that behaviour. Thats why i used event.stopPropagation()

Actualizar

$(".menu").click(function (e) {
    e.stopPropagation();
    $(".menu_list").not($(this).next()).hide();
    $(this).next().toggle();

});
$(".menu_list").find("li").click(function (e) {
    e.stopPropagation();
    alert($(this).text());
});
$(document).click(function (e) {

    $(".menu_list").hide();
});

Demostración actualizada

contestado el 28 de mayo de 14 a las 13:05

Hey can you elaborate what is e.stopPropagation() ? and What is the effect of this event and How this code works ? - user3610792

How to hide when user click on a menu that is displayed . - user3610792

@user3610792 can you explain more about your need? - Anoop Joshi P

Yeah , when user click on drop1 again then it should hide menulist , which is displayed at that time . - user3610792

Thanku , When you start using JQuery in your project ? - user3610792

I'd suggest using the stopPropagation() method as shown:

$('#close').click(function(e) {
    e.stopPropagation();
});

contestado el 28 de mayo de 14 a las 12:05

can you elaborate what is stopPropagation() ? I have read about it , but not getting , where i have to use and how to use it ? - user3610792

Evita que el evento expanda el árbol DOM, evitando que los controladores principales sean notificados del evento. api.jquery.com/event.stoppropagation - Luís P. A.

Try this script if you want to be able to close the list by clicking outside the menu_list.

  <script>
    $(document).click(function(e){
       if ($(e.target).attr('id') == 'menu')
          $('#menu_list').toggle();
       else
          $('#menu_list').hide();  
    });

    $('#menu_list').click(function(){
        $('#menu_list').hide();
    });
    </script>

Try it out in jsfiddle, I made an example for you how it works:

http://jsfiddle.net/LsZ53/52/

contestado el 28 de mayo de 14 a las 13:05

You can hide the drop down as follows

$(document).click(function(){
 if ($(e.target).attr('id') != 'menu')
 $('#menu_list').hide();
});

Also, instead of checking the style attribute every time, i'd suggest using toggleClass() como sigue

css

.hidden {
 display:none;
}

js

$(document).ready(function (e) {
 $('#menu').click(function () {
    $('#menu_list').toggleClass('hidden');
 });
 $('#menu_list').click(function () {
    $('#menu_list').addClass('hidden');;
 });
 $(document).click(function (e) {
    if ($(e.target).attr('id') != 'menu') $('#menu_list').addClass('hidden');
 });
});

JSFiddle

Nota al margen: la estructura

<div id="menu_list">
   <li>a</li>
   <li>a</li>
   <li>a</li>
   <li>a</li>
</div>

es semánticamente incorrecto.

debería ser

<ul id="menu_list">
   <li>a</li>
   <li>a</li>
   <li>a</li>
   <li>a</li>
</ul>

Actualizar

For making it work with multiple drop downs, you need to use classes en lugar de id's and tweak some html and css properties.

HTML

<div class='dropdown'>
 <input type="button" class="menu" value="drop" />
 <ul class="menu_list hidden">
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
 </ul>
</div>

js

$(document).ready(function (e) {
 $('.menu').click(function () {
    $(this).next('.menu_list').toggleClass('hidden');
 });
 $('.menu_list').click(function () {
    $(this).addClass('hidden');;
 });
 $(document).click(function (e) {
    if (!e.target.classList.contains('menu'))
      $('.menu_list').addClass('hidden');
 });
});

After correcting the semantics and applying css fixes, the final solution would be like the following

JSFiddle

Side note: note that the answers using event.stopPropagation() method won't work with dynamically created elements. Since it prevents event delegation

contestado el 28 de mayo de 14 a las 13:05

Thanks for pointing out semantically error .What about this <a><li><img /><p></p><img/></li></a> what bout this . - user3610792

That also is incorrect, list items should be inside a list.. :) why use an <li> here..? you can use a <div> instead right..? - TJ

Since "a" is inline-element , so styling "a" tag is difficult so i used "li" . Yeah i can use "Div" . - user3610792

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