CODEWITHSUNDEEP
javascriptjquery
Chaddly
Chaddly

Reputation: 267

jQuery button toggle

I have a button that toggles a menu popup. I have can make the menu disappear if you click outside of the menu but now my button toggle does not work. If I click the button again the menu stays up. How can I make the menu disappear if you toggle the button or if you click off the container?

jsFiddle: http://jsfiddle.net/PPcfN/

$('.quicklinks-rollover').click(function () {
    $('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
    var container = $(".quicklinks");
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Upvotes: 0

Views: 264

Answers (4)

Praveen
Praveen

Reputation: 56509

The reason for this behavior, the mouseup() is binded when I perform the click() on the div. You can check this behavior by adding console.log message in .mouseup event.

So instead try like below. 

$('.quicklinks-rollover').on('click', function (e) {
    $('.quicklinks').toggle();
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    var container = $(".quicklinks");
    console.log(container.has(e.target).length);
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Working Fiddle

Upvotes: 0

Tibo
Tibo

Reputation: 998

The mouseup function has to take care of the click on the button (quicklinks-rollover). If fixed the whole thing here: http://jsfiddle.net/8VUnq/1/

$(document).mouseup(function (e) {
    var popup = $('#quickLinksPopup'),
        button = $('#quickLinksToggle');
    if (popup.is(':visible')
        && !popup.is(e.target)
        && !button.is(e.target)
        && popup.has(e.target).length === 0
        && button.has(e.target).length === 0) {
        popup.toggle();
    }
});

Keep in mind those two things:

  1. Use IDs to refer to the items quicker and prevent multiple popup conflicts
  2. Using a mouse event on the whole page is not recommended as the event will get triggered very frequently, try using an alternative method such as adding a close button in the popup, or to be more effective, think about adding the mouseup listener on the show of the popup and removing it on the hide.

You can determine the state of the popup with: $(popup).is(':visible') or is(':hidden').

Upvotes: 1

arunsignit
arunsignit

Reputation: 209

You can do this Normal hide and show method. Because mostly toggle() function wont works in proper manner...

put your HTML button with attribute p="closed" by default:

      <button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>

Change Your Jquery:

         $('.quicklinks-rollover').click(function () {
             var a = $(this).attr("p");
             var container = $(".quicklinks");
             if(a=="closed"){
              container.show();
              $(this).attr("p","open");
            }else{
              container.hide();
              $(this).attr("p","closed");
            }
       });
     $(document).mouseup(function (e) {
       var container = $(".quicklinks");
       if (container.has(e.target).length === 0) {
           container.hide();
       }
     });

Upvotes: 0

Virus721
Virus721

Reputation: 8315

Try :

var $quicklinks = $('.quicklinks');
var msOverLinks = false;

$('.quicklinks-rollover').click(function () {
    $quicklinks.toggle();
});

$quicklinks.mouseenter(function() {
    msOverLinks = true;
}).mouseleave(function() {
    msOverLinks = false;
});

$(document).mouseup(function (e) {
    if( ! msOverLinks ) {
        $quicklinks.toggle();
    }
});

Upvotes: 0

Related Questions