我的jQuery下拉菜单创建了无限多个div

我正在尝试使用jquery创建一个下拉菜单。有点像。我正在使用mouseOver调用，但是鼠标在目标元素中的每个点都会创建一个新的div。我想创建一个div，当项目被鼠标悬停时，只创建一个div

<div class="site-nav-left">
    <ul class="site-nav-left-list">
        <li class="site-nav-left-item item-0"><a href="#" class="site-nav-link">INQ Info</a>
        </li>
    </ul>
</div>
<script>
    $('.site-nav-link').mouseover(function() {
        $(this).append('<div class="site-top-dropdown"></div>');
        if ($('.site-top-dropdown').parent().hasClass('item-0')) {
            $('.site-top-dropdown').append('<ul class="site-top-down-list"><li><a href="#" class="site-nav-link">About Me</a></li><li><a href="#" class="site-nav-link">Mission</a></li><li><a href="#" class="site-nav-link">Media</a></li></ul>')
        }
    });
    $('.site-nav-left-item').mouseleave(function() {
        $('.site-top-dropdown').remove();
    });
</script>

$（'.site nav link'）.mouseover（函数（）{
$（此）。附加（“”）；
if（$（'.site top dropdown'）.parent（）.hasClass（'item-0'））{
$（“.site top dropdown”）.append（“
/ul>”）
}
});
$（'.site nav left item'）.mouseleave（函数（）{
$（'.site top dropdown'）.remove（）；
});

在实际文件中有一个document.ready函数，我相信我的关闭在文件中也是正确的。我只是不知道如何阻止它在创建第一个div之后创建额外的div。

$（'.site nav link'）.mouseover（函数（）{
如果（$（'.site nav link'）.next（'.site top dropdown'）.length）{
$（'.site top dropdown'）.remove（）；
}
$（本）。在（''）之后；
if（$（'.site top dropdown'）.parent（）.hasClass（'item-0'））{
$（“.site top dropdown”）.append（“
/ul>”）
}
});
$（'.site nav left item'）.mouseleave（函数（）{
$（'.site top dropdown'）.remove（）；
});





一种简单的方法是使用某种标记/标志，例如：

var hovered = 0;

$('.site-nav-link').mouseover(function() {
    $(this).append('<div class="site-top-dropdown"></div>');

    if ($('.site-top-dropdown').parent().hasClass('item-0') && hovered === 0) {
        hovered = 1;
        $('.site-top-dropdown').append('<ul class="site-top-down-list"><li><a href="#" class="site-nav-link">About Me</a></li><li><a href="#" class="site-nav-link">Mission</a></li><li><a href="#" class="site-nav-link">Media</a></li></ul>')
    }
});

$('.site-nav-left-item').mouseleave(function() {
    $('.site-top-dropdown').remove();
    hovered = 0;
});

var悬停=0；
$（'.site nav link'）.mouseover（函数（）{
$（此）。附加（“”）；
if（$（'.site top dropdown'）.parent（）.hasClass（'item-0'）&悬停===0）{
悬停=1；
$（“.site top dropdown”）.append（“
/ul>”）
}
});
$（'.site nav left item'）.mouseleave（函数（）{
$（'.site top dropdown'）.remove（）；
悬停=0；
});
如果你悬停得太快而不让它清除，仍然可以添加无限多的
div
。@Joelalmeda将更改添加到清除中，啊，这需要时间来重现问题。谢谢你，这太近了！使用您的代码，div的创建速度将大大降低。但是，如果我将鼠标悬停在同一个列表项上而不清除生成的div，它会创建另一个div（例如，我将鼠标悬停在创建的div的列表项上而不点击中间的任何其他元素）。我想这是因为我把我的div放错地方了？看看这个。现在不创建div吗？这是您正在寻找的吗？