Alex Rivera | Logout

hiding an element on click of anything else on the page

Asked 2009-05-21T14:47:47.523
26

referring to Franek's question found here I have one more question.

The solution on the link above worked for me until I introduced another menu to my page. In this case, there are two menus next to each other. When I click on one of them, the relevant div is displayed showing possible options to select. Then, when I click on the document the div gets closed. But when I click on any other element it is still displayed.

A solution for me would be to run the code to close the menu on any other element click as well as document click.

How can I achieve this ?

(menu: invisible div element that when clicked on its title becomes visible)

jquery
Edit
Report

2 Answers

13

Clicking on every element but the menu that you want to hide right?

$(function() {
    $('*').click(function(e) {
        if(e.target.id != 'menu') {
            $('#menu').hide();
        }
    });
});
answered 2009-05-23T23:38:43.567
-2

my html code is

<div class="filter-show">
    <ul style="display:none;">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
    </ul>
</div>

and jquery code is

<script>
    $('html').click(function(event){
        if(!$(event.target).children().is('.filter-show > ul')){
            $(".filter-show > ul").fadeOut();
        }
    });
    $(".filter-show").click(function(){
        $(".filter-show > ul").fadeOut();
        $(this).children('ul').fadeIn();
    });
    $(".filter-show > ul").hover(function(){
        //
    },function(){
        $(".filter-show > ul").fadeOut();
    });
</script>
answered 2013-02-22T08:38:31.310

Your Answer