Outer Div Is Hiding When Clicking On Inner Div

i have client website http://indiahomeplus.com/mapview.php when clicking on filter and then selecting a query, the filter div is hiding. Its work fine in Chrome but not working in

Solution 1:

Without some code snippets it's hard to tell what's happening. Based on experience I had this happen on a project I was working on and it turns out there was a click event firing on the outer div which hid it. If that's the case, use e.stopImmediatePropagation() on your event handler to make sure the event doesn't bubble up the dom. Also, make sure you have the correct query selector. That gets everyone now and again.

Solution 2:

Because of the incomplete implementation of the mouseleave-event in browsers jquery uses a own implementation by observing mouseover/mouseout. In contrast to the native mouseenter/mouseleave these events bubble, that's the reason for the issue.

Prevent the events from bubbling when they fire in select/option:

$menu.children('li').each(function () {
                var$this = $(this),
                    $span = $this.children('span');
                $span.data('width', $span.width());

                //Prevent the events from bubbling                 
                $(this).find('select,option')
                    .on('mouseout mouseleave mouseover mouseenter',
                         function (e) {
                           e.stopPropagation();
                           returnfalse;
                         });

                $this.on('mouseenter', function () {
                    $menu.find('.ldd_submenu')
                    //prevent the submenu of $this from hiding
                    .not($('div', this))
                        .stop(true, true).hide();
                    $span.stop().animate({
                        'width': '100px'
                    }, 300, function () {
                        $this.find('.ldd_submenu').slideDown(300);
                    });
                }).on('mouseleave', function (e) {
                    $this.find('.ldd_submenu').stop(true, true).hide();
                    $span.stop().animate({
                        'width': $span.data('width') + 'px'
                    }, 300);
                });
            });

Demo:http://jsfiddle.net/doktormolle/2e2br/

Note: I've added a small margin-left to the select, otherwise the menu will not disappear when you leave it via the left side of the select.