Question

我遇到了这个问题，无法想到除此之外的方法。看一下图像

http://i.stack.imgur.com/7xxjS.png

reference image for the problem

现在的问题是，div不是li的一部分，在离开li（并进入div）时，li会折叠回来。这需要处理，我仍然坚持如何做到这一点。

以下是javascript代码

    a.cache.brand_nav.find("li a").hover(function (c) {
        if (a.isTablet && c.currentTarget.href !== f) d.location = c.currentTarget.href;
        else {
            a.cache.brand_nav.find("li a").css('top', '0px'); //Collapsing all li's before expanding one
            c = b(this);
            c.stop(true, true).animate({ top: '-' + c.find("img").height() + 'px' }, 250, 'easeInCirc');
            $('#bgIdeas').stop(true, true).animate({ bottom: '+' + parseInt(parseInt(c.find("img").height())).toString() + 'px' }, 500, 'easeInCirc', false);
            $('.outerBGs').hide();
            $('#backgrounds').hide();
            if (this.className == 'ideas') {
                $('#ideasBG').stop(true, true).show(5000, 'easeOutExpo');
                $('#bgIdeas').empty();
                $('#bgIdeas').append('<p style=" position:absolute; left:22%; margin-top:10px;"><img src="images/ideas/ideas_worldofideas_thumb.jpg"><br>World of Ideas</p>         <p style=" position:absolute; left:32%; margin-top:10px;"><img src="images/ideas/ideas_history_thumb.jpg"><br>History</p>           <p style=" position:absolute; left:42%; margin-top:10px;"><img src="images/ideas/ideas_gulahmed_thumb.jpg"><br>About Gul Ahmed</p>          <p style=" position:absolute; left:52%; margin-top:10px;"><img src="images/ideas/ideas_partner_thumb.jpg"><br>Be an Ideas Partner</p>');
            }
            else
                if (this.className == 'women') {
                    $('#womenBG').stop(true, true).show(5000, 'easeOutExpo');
                    $('#bgIdeas').empty();
                    $('#bgIdeas').append('<p style=" position:absolute; left:42%; margin-top:10px;"><img src="images/women/women_fabrics_thumb.jpg"><br>Fabric</p>          <p style=" position:absolute; left:52%; margin-top:10px;"><img src="images/women/women_readytowear_thumb.jpg"><br>Ready to Wear</p>         <p style=" position:absolute; left:62%; margin-top:10px;"><img src="images/women/women_shoes_thumb.jpg"><br>Shoes</p>           <p style=" position:absolute; left:72%; margin-top:10px;"><img src="images/women/women_bags_thumb.jpg"><br>Bags</p>');
                }
                else
                    if (this.className == 'men') {
                        $('#menBG').stop(true, true).show(5000, 'easeOutExpo');
                        $('#bgIdeas').empty();
                        $('#bgIdeas').append('<p style=" position:absolute; left:20%; margin-top:10px;"><img src="images/men/men_fabrics_thumb.jpg"><br>Fabric</p>          <p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/men/men_readytowear_thumb.jpg"><br>Ready to Wear</p>         <p style=" position:absolute; left:61%; margin-top:10px;"><img src="images/men/men_shoes_thumb.jpg"><br>Shoes</p>           <p style=" position:absolute; left:71%; margin-top:10px;"><img src="images/men/men_accesories_thumb.jpg"><br>Accessories</p>');
                    }
                    else
                        if (this.className == 'kids') {
                            $('#kidsBG').stop(true, true).show(5000, 'easeOutExpo');
                            $('#bgIdeas').empty();
                            $('#bgIdeas').append('<p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/kids/kids_readytowear_thumb.jpg"><br>Ready to Wear</p>         <p style=" position:absolute; left:40%; margin-top:10px;"><img src="images/kids/kids_shoes_thumb.jpg"><br>Shoes</p>         <p style=" position:absolute; left:50%; margin-top:10px;"><img src="images/kids/kids_accessories_thumb.jpg"><br>Accessories</p>');
                        }
                        else
                            if (this.className == 'homes') {
                                $('#homesBG').stop(true, true).show(5000, 'easeOutExpo');
                                $('#bgIdeas').empty();
                                $('#bgIdeas').append('<p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/home/bed_linen_thumb.jpg"><br>Bed Linen</p>            <p style=" position:absolute; left:40%; margin-top:10px;"><img src="images/home/bed_basics_thumb.jpg"><br>Bed Basics</p>            <p style=" position:absolute; left:50%; margin-top:10px;"><img src="images/home/kitchen_textile_thumb.jpg"><br>Kitchen Textile</p>          <p style=" position:absolute; left:60%; margin-top:10px;"><img src="images/home/bath_thumb.jpg"><br>Bath Accessories</p>            <p style=" position:absolute; left:70%; margin-top:10px;"><img src="images/home/home_accessories_thumb.jpg"><br>Home Accessories</p>');
                            }
    }
    },
            function () {
                c = b(this);
                    $('.outerBGs').stop(true, true).hide(5000, 'easeOutExpo');
                $('#backgrounds').stop(true, true).show(1000, 'easeOutExpo');
                $('#bgIdeas').stop(true, true).animate({ bottom: '0px' }, 250, 'easeInCirc');
                c.stop(true, true).animate({ top: '0px' }, 250, 'easeInCirc');
                //            $(document).unbind('mousemove');
                //            $(document).mousemove(function (e) {
                //                var offset = $('#bgIdeas').offset();
                //                result = offset.left <= e.pageX && offset.left + $('#bgIdeas').outerWidth() > e.pageX && offset.top <= e.pageY && offset.top + $('#bgIdeas').outerHeight() > e.pageY;
        //                //To see if mouse coordinates are under the area of div.
        //                //alert(parseInt(parseInt(offset.left) + parseInt($('#bgIdeas').outerWidth())) + '     ' + e.pageX + '         ' + parseInt(parseInt(offset.top) + parseInt($('#bgIdeas').outerHeight())) + '        ' + e.pageY);
        //                                        
        //                if (result == false) {
        //                    clearInterval(myRecFunc);
        //                    $('.bgs').show();
        //                    continueSlideShow();
        ////                    $('#bgIdeas').stop(true, true).animate({bottom: "0px"},500, "easeOutExpo", function () {$(document).unbind('mousemove');});
        ////                    c.stop(true, true).animate({top: "0px"},{ duration: 500, queue: false });

        //                    
        //                }
        //                else {
        //                }
        //            });
    });

上面评论的代码实际上是我之前通过mousemove事件尝试的一种方法，通过捕获鼠标位置并限制函数输入代码，如果鼠标在DIV上，但它导致随机功能不正常，我想这必须因为事件的绑定和解除绑定如此之快。拜托，我需要帮助。

Answer 1

这可以使用两个类来完成，每个类都有display:block。

每当li至少有一个类时，它就会显示出来。因此，li本身和div每个都删除mouseover上显示的一个类，并在mouseout上删除它自己的（相应）类。

Here's an example

Answer 2

这是一个更好，完全不同的答案

example

将委派的侦听器放在div和li的最低共享父级上。在示例中，这是body。然后，该侦听器检查事件是否在这两个元素中的一个上，如果不是，则对li执行操作。

编辑包含子元素。

Javascript，如果鼠标在特定位置，则停止动画

2 个答案: