how to hide this black box when i click outside the box and not on the link to hide the box?

Question

I want to click outside box and NOT on the (click me) to hide the box. However when i click on the box and the link, i want to box to stay on. Hope someone here can help. Thanks so much. you guys are the best. here is http://jsfiddle.net/hamdlink/y94nr/

 <style>
    ul li{
        list-style: none;
    }
        .click-me{
            display: inline;
        }
        .hidden{
            display:none;
            background: #333;
            width:150px;
            color:red;
            padding:30px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.click-me').click(function(){
                $('.hidden').slideDown();
            });

            $('body').click(function(e){
                if(e.target.className!=='click-me'){
                    $('.hidden').slideUp();
                }
            });
        });
    </script>
    <ul>
        <li class="click-me">click me
            <ul class="hidden">
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li>
            </ul>
        </li>
    </ul>

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Found this: How do I detect a click outside an element?

Also we need to track whether the element is hidden or not, so it won't slide up right away. Here is the fiddle: http://jsfiddle.net/Fu8k4/1/

$(document).ready(function() {
    var hidden = true;
    $('.click-me').click(function() {
        if (hidden){
           $('.hidden').slideDown(400, function(){hidden = false;});
        }
    });

    $('html').click(function() {
        if (!hidden) {
            $('.hidden').slideUp();
            hidden=true;
        }
    });

    $('.hidden, .click-me').click(function(event) {
        event.stopPropagation();
    });
});

score 0 · Answer 2 · edited May 23 '17 at 12:26

Ok, check this fiddle: http://jsfiddle.net/m8yBs/

I've use the code that i've found in this other stack overflow post: Use jQuery to hide a DIV when the user clicks outside of it

the code that i've used is this:

$(document).mouseup(function (e) {
    var container = $(".hidden");

    if (!container.is(e.target) // if the target of the click isn't the container...
    &&
    container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('.hidden').slideUp();
    }
});

I wish it helps you. Good luck!

score 0 · Answer 3 · answered Apr 25 '14 at 00:34

I have managed to get your fiddle working:

http://jsfiddle.net/y94nr/3/

The relevant bit is:

$(document).ready(function(){
    var hideOnClick = function() {
        $('body').live('click.momethingUnique', function(e) {
            var target = $(e.target);
            if(target.closest('.hidden').length) {
                return;
            }
            $('.hidden').slideUp();
            $('body').die('click.momethingUnique');
        });
    };

    $('.click-me').click(function(e){
        if($(".hidden").is(":hidden")) {
            $('.hidden').slideDown();
            hideOnClick();
            return false;    
        }
    });

});

This handles the click of anything except the menu. Note that I used live/die instead of on/off because the fiddle used jQuery 1.6.1. If you use a later version, replace with on/off maybe.

how to hide this black box when i click outside the box and not on the link to hide the box?

3 Answers3