Question

我有这个清单：

<ol id="followUs">
    <li>Follow us</li>
    <li class="blog"><a href="#"></a></li>
    <li class="linkedIn"><a href="#"></a></li>
    <li class="twitter"><a href="#"></a></li>
    <li class="facebook"><a href="#"></a></li>
    <li class="smartPhone"><a href="#"></a></li>
    <li id="shareMore">More
        <ul id="socialMore" style="display: none;">
            <li id="youtube"><a href="#">Youtube</a></li>
            <li id="flickr"><a href="#">FlickR</a></li>
            <li id="slideshare"><a href="#">SlideShare</a></li>
            <li id="newsletter"><a href="#">Newsletter</a></li>
        </ul>
    </li>
</ol>

以下jQuery：

<script>
jQuery(document).ready(function(){
    jQuery("li#shareMore").mouseenter(function() {
        jQuery('ul#socialMore').css("display","block");
        jQuery('span.popin_header_button').css("display","none");
    });

    jQuery("li#shareMore").mouseleave(function() {
        setTimeout( function(){
            jQuery('ul#socialMore').css("display","none");  
            jQuery('span.popin_header_button').css("display","block");
        },1000);
    });
})
</script>

第二个列表#socialMore在页面加载时隐藏，我希望在鼠标悬停时显示它，并且当我将鼠标悬停在#socialMore列表周围时，它会留在那里。问题是，当我还在徘徊#socialMore列表时，列表正在出现并消失（除非第二个列表与第一个列表重叠，我不想要）。

其次，我希望周围的员工位于列表下方，这不会发生，因此我需要隐藏这些。

对于CSS，第一个列表#followUs是水平的，第二个列表#shareMore是垂直的。

任何人都可以在这里提出解决方案。没有弄错了。

感谢路过。

10月15日编辑

我将jQuery更改为：

jQuery("li#shareMore").hover(function() {
    jQuery('li#shareMore>ul').show();
},function(){
        setTimeout( function(){
            jQuery('li#shareMore>ul').hide();   
        },2000);
    }
);

它有效，但不稳定。有时，它完美地工作，有时，即使我仍在徘徊第一个<li id="shareMore">More

，ul也会消失

编辑II：10月15日

进一步推进，我发现它并不是真的不稳定。逻辑是，在页面刷新时，如果我在没有前往li#shareMore列表的情况下悬停>ul，它将按预期工作。我第一次悬停在>ul列表上时，它也按预期工作。但是，一旦我从>ul列表中悬停，从以下时间开始，>ul列表会在setTimeOut时间内消失，在这种情况下为2秒。

但是，如果我将setTimeOut限制设置为0，则一切都按预期工作。这是迄今为止的观察，除非我遗漏了什么。奇怪的世界！

感谢任何提示＆gt;奇怪的情况。

修改

最终解决了，使用cleartimeout：jquery hover and setTimeout / clearTimeOut

Answer 1

你可以使用jquery的show()和hide()函数。喜欢

 $('ul#socialMore').show();
 $('span.popin_header_button').hide();

Answer 2

您可以尝试：

jQuery(document).ready(function(){
    jQuery("li#shareMore").mouseenter(function() {
       $('ul#socialMore').show();
    });

    jQuery("li#shareMore").mouseleave(function() {
       $('ul#socialMore').hide();
    });
})

请参阅：jsfiddle

Answer 3

你可以尝试下面的代码

jQuery("li#shareMore").on("mouseout", 'ul#socialMore li', function() {
    setTimeout( function(){
        jQuery('ul#socialMore').css("display","none");  
        jQuery('span.popin_header_button').css("display","block");
    },1000);
});

开始使用jquery的“on”事件。

列表显示隐藏与jquery

3 个答案: