单击内部 div 时隐藏外部 div

Question

我有客户网站http://indiahomeplus.com/mapview.php 单击过滤器然后选择查询时，过滤器 div 被隐藏。 它在 Chrome 中运行良好，但在 Firefox 和 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;
                }

这是小提琴：

http://jsfiddle.net/dnG93/

即在 chrome 中工作，但不在 firefox 等中工作。

Answer 1

如果没有一些代码 sn-ps，就很难知道发生了什么。根据经验，我在我正在处理的一个项目中发生了这种情况，结果发现在隐藏它的外部 div 上触发了一个点击事件。如果是这种情况，请在事件处理程序上使用 e.stopImmediatePropagation() 以确保事件不会冒泡 dom。此外，请确保您有正确的查询选择器。这不时地吸引着每个人。

Answer 2

由于浏览器中mouseleave-event 的实现不完整，jquery 通过观察mouseover/mouseout 使用自己的实现。与本机 mouseenter/mouseleave 相比，这些事件冒泡，这就是问题的原因。

防止事件在选择/选项中触发时冒泡：

            $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);
                });
            });

演示： http://jsfiddle.net/doktormolle/2e2br/

注意：我在选择中添加了一个小的margin-left，否则当你从选择的左侧离开时菜单不会消失。