单击内部div时，外部div隐藏

Question

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 firefox and IE.

        ul.ldd_menu{
                    margin:0px;
                    padding:0;
                    display:block;
                    height:50px;
                    background-color:#Ae2f2f;
                    list-style:none;
                    font-family:"Trebuchet MS", sans-serif;
                    border-top:1px solid #fff;
                    border-bottom:1px solid #fff;
                    border-left:1px solid #fff;
                    -moz-box-shadow:0px 3px 4px #591E12;
                    -webkit-box-shadow:0px 3px 4px #591E12;
                    -box-shadow:0px 3px 4px #591E12;
                }
                ul.ldd_menu a{
                    text-decoration:none;
                }
                ul.ldd_menu > li{
                    float:left;
                    position:relative;
                }
                ul.ldd_menu > li > span {
                    float:left;
                    color:#fff;
                    background-color:#ae2f2f;
                    height:50px;
                    line-height:50px;
                    cursor:default;
                    padding:0px 20px;
                    text-shadow:0px 0px 1px #fff;
                    border-right:1px solid #dddddd;
                    //border-left:1px solid #C44D37;
                }
                ul.ldd_menu .ldd_submenu{
                    position:absolute;
                    top:50px;
                    width:1000px;
                    height: 360px;
                    display:none;
                    opacity:0.95;
                    left:0px;
                    font-size:10px;
                    background: #C34328;
                    border-top:1px solid #dddddd;
                    -moz-box-shadow:0px 3px 4px #591E12 inset;
                    -webkit-box-shadow:0px 3px 4px #591E12 inset;
                    -box-shadow:0px 3px 4px #591E12 inset;
                    z-index: 99999;



                }
                a.ldd_subfoot{
                    background-color:#f0f0f0;
                    color:#444;
                    display:block;
                    clear:both;
                    padding:15px 20px;
                    text-transform:uppercase;
                    font-family: Arial, serif;
                    font-size:12px;
                    text-shadow:0px 0px 1px #fff;
                    -moz-box-shadow:0px 0px 2px #777 inset;
                    -webkit-box-shadow:0px 0px 2px #777 inset;
                    -box-shadow:0px 0px 2px #777 inset;
                }
                ul.ldd_menu ul{
                    list-style:none;
                    float:left;
                    border-left:1px solid #DF7B61;
                    margin:20px 0px 10px 30px;
                    padding:10px;
                }
                li.ldd_heading{
                    font-family: Georgia, serif;
                    font-size: 13px;
                    font-style: italic;
                    color:#FFB39F;
                    text-shadow:0px 0px 1px #B03E23;
                    padding:0px 0px 10px 0px;
                }
                ul.ldd_menu ul li a{
                    font-family: Arial, serif;
                    font-size:10px;
                    line-height:20px;
                    color:#fff;
                    padding:1px 3px;
                }
                ul.ldd_menu ul li a:hover {
                    -moz-box-shadow: 0px 0px 2px #333;
                    -webkit-box-shadow: 0px 0px 2px #333;
                    box-shadow: 0px 0px 2px #333;
                    background: #AF412B;
                }

here is the fiddle:

http://jsfiddle.net/dnG93/

ie working in chrome , but not in firefox and others.

Answer 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.

Answer 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();
                           return false;
                         });

                $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.