列表显示隐藏与 jquery

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 也会消失。

第二版：10 月 15 日

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

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

感谢任何提示>奇怪的情况。

编辑

似乎终于解决了，使用 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”事件。