CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3610792
user3610792

Reputation: 61

How to hide drop down Menu when user clicked out side of drop down?

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>

Upvotes: 0

Views: 4683

Answers (4)

T J
T J

Reputation: 43166

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() as follows

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

Side note: the structure

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

is semantically incorrect.

it should be

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

Update

For making it work with multiple drop downs, you need to use classes instead of 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

Upvotes: 0

Norrj
Norrj

Reputation: 114

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/

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

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();
});

Demo

Edit

The 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 click and .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()

Update

$(".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();
});

Updated Demo

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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

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

Upvotes: 0

Related Questions