CODEWITHSUNDEEP
jqueryhtmlcss
Neo
Neo

Reputation: 407

How to make dropdown hide when clicked anywhere outside of it?

Here it is... By the way, it is misaligned in jsFiddle. In my actual webpage it's aligned, so no worries there.

http://jsfiddle.net/j8oawqL4/

I tried using code inspired by http://jsbin.com/umubad/2/ but I couldn't figure out how to successfully implement it.

HTML

  <ul class="navbar cf">
                    <li>
                        <a href="#" class="ActiveListItem">Category</a>
                        <ul>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

CSS

ul.navbar {

  border-style:solid;
  border-width:1px; 
  border-color:#739FE0;
  width: 100px;                /*Widthchanger1*/
  border-radius: 4px;
  margin-left:0px;
  margin-right:0px;
  font-size:14px;
  height:33px;



}


ul.navbar li a.ActiveListItem {
    background:url(../images/downarrowblue.png) !important; 
    background-repeat: no-repeat !important;
    background-size: 10px 10px !important;
    background-position: 83px 13px !important;
    color:white; !important;
    background-color:#222 !important;
    padding:7.5px 0px !important; 
    font-weight:normal !important;
    margin-left:0px;         /*Widthchanger2, got the activeitem centered with list text this way*/
    margin-right:0px;
    border-radius: 4px;
    height:18px;
    width:100px;   /*kinda messes with width of text*/
     margin-bottom:1px;

}

ul.navbar li {

    position: relative;
    width:100px;                        /*Changes width of actual list*/
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .1s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    /*background:black; */
    background:#739FE0;
    color:#FFFFFF;
    /*font-weight:600;*/
    /*border-bottom-color:#FFFFFF;
    border-bottom-style:solid;*/
    /*border-color:#FFFFFF;
    border-style:solid;
    border-width:1px; */

}

    ul.navbar li ul {
        margin-top: 0px;               /*Controls space from listdropdown to listchooser*/
        position: absolute;
        background: #222;
        font-size: 14px;
        /* min-width: 200px; */
        display: none;
        z-index: 99;
        box-shadow: inset 0 0px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }

JS

$(function() {




  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});

Upvotes: 1

Views: 107

Answers (4)

Dan Beaulieu
Dan Beaulieu

Reputation: 19954

here's my jsFiddle

modify your jQuery:

$(function() {

    var container = $('.navbar');


  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });


 $(document).mouseup(function (e)
    {
    if (!container.is(e.target) 
        && container.has(e.target).length === 0) 
    {
        $('.navbar li ul').slideToggle(300);
    }
     });
});

Upvotes: 1

Thomas Bolander
Thomas Bolander

Reputation: 3952

What about ?

$("body").on("click", function(e){
    if(!$(e.target).is(".navbar *")){
        $('.navbar li ul').slideUp(100);
    }
});

http://jsfiddle.net/j8oawqL4/7/

Upvotes: 0

UI-UX
UI-UX

Reputation: 260

$(document).click(function (event) {
alert(event.target.id);
if (event.target.id != 'category') {
    $('.navbar li ul').slideToggle(300);
}

})

Upvotes: 1

renakre
renakre

Reputation: 8291

DEMO: https://jsfiddle.net/j8oawqL4/3/

 $(document).click(function (event) {//if clicked on anywhere

    if (event.target.id != 'category') {//it was not the 'category' dropdown list
        $('.navbar li ul').hide(300);//then hide it
    }
})

Upvotes: 3

Related Questions