Question

我正在尝试使用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>

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

Answer 1

$('.site-nav-link').mouseover(function () {
    if ($('.site-nav-link').next('.site-top-dropdown').length) {
        $('.site-top-dropdown').remove();
    }
    $(this).after('<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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

使用after()代替append()，

$(this).after('<div class="site-top-dropdown"></div>');

append()在a内添加了元素。

Demo

Answer 2

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

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;
});

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

2 个答案: