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

如果没有一些代码片段，很难说出发生了什么。根据经验，我在一个正在进行的项目中发生这种情况，事实证明在外部div上有一个点击事件，它隐藏了它。如果是这种情况，请在事件处理程序上使用e.stopImmediatePropagation（）以确保事件不会冒泡dom。此外，请确保您具有正确的查询选择器。这让每个人一次又一次。

Answer 2

由于浏览器中mouseleave-event的实现不完整，jquery通过观察mouseover / mouseout来使用自己的实现。与本地鼠标中心/鼠标保存相反，这些事件起泡，这就是问题的原因。

防止事件在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);
                });
            });

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

注意：我在选择中添加了一个小边距，否则当您通过选择的左侧离开时菜单不会消失。

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

2 个答案: