admin管理员组

文章数量:1287893

As you guys can see, I have a drop down menu.

I have a lot of columns, each one has an option to open the menu.

$(".optionCont").live("click", function(){
    $(".dropMenuCont").slideUp();
    if ($(this).next().css("display") == "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

So, how can I do the menu slideUp when I click in any place of the page?

Like a document click?

I visited others topics, but I don't know why, this is not working. Maybe I'm doing it in a diferent way.

I accept any tips in the menu coding.

Demo: Jsfiddle

As you guys can see, I have a drop down menu.

I have a lot of columns, each one has an option to open the menu.

$(".optionCont").live("click", function(){
    $(".dropMenuCont").slideUp();
    if ($(this).next().css("display") == "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

So, how can I do the menu slideUp when I click in any place of the page?

Like a document click?

I visited others topics, but I don't know why, this is not working. Maybe I'm doing it in a diferent way.

I accept any tips in the menu coding.

Demo: Jsfiddle

  • javascript
  • jquery
  • menu
Share Improve this question edited May 29, 2014 at 13:34 Peter Mortensen 31.6k22 gold badges110 silver badges133 bronze badges asked Jul 20, 2011 at 13:27 Ricardo BinnsRicardo Binns 3,2466 gold badges45 silver badges71 bronze badges 4
  • This is a duplicate question. Check out the answer here: stackoverflow./questions/5104309/close-on-click-anywhere – Adam Terlson Commented Jul 20, 2011 at 13:33
  • @Adam: Cast a close vote then. – Lightness Races in Orbit Commented Jul 20, 2011 at 13:34
  • Hmm, guess I don't see any "close" vote option... Haven't done that before, am I missing something obvious? – Adam Terlson Commented Jul 20, 2011 at 13:35
  • yeah, i know that have others topics with some solution, but with me, dos not work that. sry – Ricardo Binns Commented Jul 20, 2011 at 13:38
Add a ment  | 

5 Answers 5

Reset to default 8

Register a one-off handler inside the callback to make sure the next click closes the menu:

$(".optionCont").live("click", function(ev){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    ev.stopPropagation();

    $(document).one('click', function() {
             $(".dropMenuCont").slideUp();

    });
});

See http://jsfiddle/alnitak/GcxMs/

$(".optionCont").click(function(e){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    e.preventDefault();
    e.stopPropagation();
    return false;
});

$(document).click(function() {
     $(".dropMenuCont").slideUp();
});

Here is the JSFiddle

Try something like:

$(document).click(function(e) {
   if ($(e.target) != myEl)
       myEl.slideUp();
})

Alternative: working example.

Source:

$(".optionCont").live("click", function(e) {
    var that = this;
    $(document).click(function(e) {
        console.log(e.target);
        console.log(that);
        if (e.target != that) {
            e.stopPropagation();
            e.preventDefault();
            $(".dropMenuCont").slideUp();
        }
    });
    if ($(this).next().css("display") === "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
    e.stopPropagation();
    e.preventDefault();
});

Just bind the click to <body>

$('body').click(function() {
  $(".dropMenuCont").slideUp();
});

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

$('body').bind("click",function (){
    $(".dropMenuCont").slideUp();
});
$('.dropMenuCont').click(function(event){
    event.stopPropagation();
});

I think a better idea to check if something is hidden is to toggle the class on your menu in a callback of the animation and then check it with hasClass.

本文标签： javascriptClose a menu with an anywhere clickStack Overflow

版权声明：本文标题：javascript - Close a menu with an anywhere click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741331356a2372782.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。