Question

我有以下代码添加'selected'calss并在用户将鼠标悬停在其中一个列表项上时显示dropDown div。

当页面加载时，我试图检测是否有任何列表项将鼠标悬停在它们上面，如果没有，则激活悬停事件。

由于某种原因，此代码不起作用。它看起来像“if（$（'li'）。not（'：hover'））{”是责备。

任何人都可以在我出错的地方发光，并指出我正确的方向吗？

<script src="jquery.js" type="text/javascript"></script>

<style type="text/css">

ul
{
    list-style-type: none;
}

li
{
    float: left;
    margin: 0px 5px 0px 5px;
}

.dropDown
{
    display: none;
    width: 100px;
    height: 100px;
    background: yellow;
}

.selected
{
  background: red;
}

</style>

<script type="text/javascript">

$(document).ready(function() {
    if($('li').not(':hover')) {
        $('li').hover(function() {
            $(this).addClass('selected');
            $(this).find('.dropDown').show();
        }, function() {
            $(this).removeClass('selected');
            $(this).find('.dropDown').hide();
        })
    }
})

</script>


<ul>
    <li>
        <a href="index.html">Menu Item One</a>
        <div class="dropDown"></div>
    </li>
    <li>
        <a href="index.html">Menu Item Two</a>
        <div class="dropDown"></div>
    </li>
    <li>
        <a href="index.html">Menu Item Three</a>
        <div class="dropDown"></div>
    </li>
    <li>
        <a href="index.html">Menu Item Four</a>
        <div class="dropDown"></div>
    </li>
    <li>
        <a href="index.html">Menu Item Five</a>
        <div class="dropDown"></div>
    </li>
</ul>

Answer 1

一个问题是您无法检查jQuery对象是否存在。即使没有与选择器和过滤器匹配的元素，仍然会创建一个对象。

您需要测试对象中找到的元素数组是否具有length。没有长度意味着没有匹配的元素

if($('li').not(':hover').length)

jQuery文档就绪悬停检测

1 个答案: