automatic close function for selection

Question

I have a button which creates a pulldown in which you can select several categories. Now i want this to close automatically when i click outside the pulldown. Something like a lightbox or modal popup which closes if you click anywhere else on the page. Now i have to click the button again to close it. If i dont and go elsewhere on the page, the dropdown stays visible (until i click it)

This is the code of the button:

$(function(){
    $('#browse-btn').click(function(){
        $('#browse-content').toggle('1000');
        $(this).toggleClass('active');                          
        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
        else $(this).find('span').html('&#x25BC;')
    });

    $(".scroll-top").scrollToTop();

    $("#category_id").selectbox();
});

Is this possible? thanks

Does this previous question fit? http://stackoverflow.com/questions/6463486/jquery-drop-down-menu-closing-by-clicking-outside — Nick, Jul 04 '16 at 20:02
Try to study this post: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element? In resume, you need to hear the click on the document and test if the dropdown is open. — Waldir J. Pereira Junior, Jul 04 '16 at 20:06

score 0 · Answer 1 · answered Jul 04 '16 at 20:04

0

I'm not exactly sure of the elements you want to hide as you don't have a demo, so I cannot provide a fully working code, however you should do something like this:

$("body").click(function(event) {
    if (event.target.id != "browse-btn") {
        // Do something when there's a click outside of #browse-btn 
        // and the element you want to hide is currently visible
    }
});

answered Jul 04 '16 at 20:04

Dimitar

1

Hi Dimitar, as i am not a programmer, but can find my way around a bit, maybe you can take a look: http://nieuw.zelfaanbieden.online this is the site and when you click the browse button below the logo, you have to click it again to close it...when it drops down you see all kinds of categories) – Jul 04 '16 at 20:15

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

Using jquery this is the code I used for a similar case scenario sometime ago:

$(document).click(function(event) { 
    if(!$(event.target).closest('.pulldown').length) {
        if($('.pulldown').is(":visible")) {
            $('.pulldown').slideUp()
        }
    }        
})

You can read more about this in the original post How to detect a click outside an element? submitted by Art.

edited May 23 '17 at 12:22

Community

1
1

answered Jul 04 '16 at 20:11

Antoni4

2,535
24
37

1

This is what worked for me: $(document).click(function(event) { if(!$(event.target).closest('#menucontainer').length && !$(event.target).is('#menucontainer')) { if($('#menucontainer').is(":visible")) { $('#menucontainer').hide(); } } }) Thanks! – Jul 04 '16 at 20:23

score 0 · Answer 3 · edited May 23 '17 at 11:52

You can attach a click event to all chidren of the body tag that removes that active class, but you would want to make sure to unbind that event so it doesn't run every time a click takes place that doesn't have some sort of prevent default on it. Something like this:

$(function(){
    var hidePulldown = function(){
        $('#browse-btn').removeClass('active');
        $('body *').unbind("click", hidePulldown);
    }
    $('#browse-btn').click(function(){
        $('#browse-content').toggle('1000');
        $(this).toggleClass('active');                          
        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
        else {
            $(this).find('span').html('&#x25BC;');
            $(document).on('click', 'body *', hidePulldown);
        }
    });

    $(".scroll-top").scrollToTop();

    $("#category_id").selectbox();
});

Also, the

$(document).on('click', element, function(){function body})

is the preferred way to attach click events i believe: $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})

score 0 · Answer 4 · answered Jul 04 '16 at 20:25

0

This is what worked flawlessly for me after reading some of the answers here:

$(document).click(function(event) { 
if(!$(event.target).closest('#menucontainer').length &&
   !$(event.target).is('#menucontainer')) {
    if($('#menucontainer').is(":visible")) {
        $('#menucontainer').hide();
    }
}        
})

Thanks for pointing me in the right way!

answered Jul 04 '16 at 20:25

1

i can only accept my own answer in two days...i marked the answer that put me in the right way as correct – Jul 04 '16 at 20:38

automatic close function for selection

4 Answers4