Question

我有一个这样的菜单：

<ul class="nav">
    <li class="dropdown" id="123">
        <ul class="nav123">
            <li id="widget-products">
                <ul class="123">// this one is filled with content from the script below</ul>
            </li>
        </ul>
    </li>
    <li class="dropdown" id="1234">
        <ul class="nav1234">
            <li id="widget-products">
                <ul class="1234">// this one won't fill</ul>
            </li>
        </ul>
    </li>
</ul>

当您将鼠标悬停在<ul class="123">上时，我试图用{j}文件创建的内容填充<ul class="1234">和<li class "dropdown">。对于第一个<ul class="123">代码有效，但不适用于第二个代码。我认为以下脚本可能会搞乱类名或选择错误的ID，因为我使用closest()。我整天都在尝试所有的东西，但是我自己也无法想象出来......

简而言之，脚本仅适用于第一个ul。有人能看到我失踪的东西吗？

的jQuery

$(document).on('mouseenter mouseleave', '.dropdown', function (e) {
    if (e.type == 'mouseenter') {
        $(this).addClass('open');
        var catId = $(this).closest('[id]').attr('id');
        var catHref = $(this).closest('[id]').children('a').attr('href');
        menuWidget(catId, catHref);
    } else {
        $(this).removeClass('open');
    }
});
function menuWidget(catId, catHref) {
    var url = catHref + '/site.json';
    $.getJSON(url, function (json) {
        //building elements
        $('#widget-products ul.' + catId + '').html(productsHtml);
    });
}

Answer 1

ID必须是唯一的，使用公共类名作为选择器，将代码更改为

<li class="widget-products">

的JavaScript

$('.widget-products ul.'+catId).html(productsHtml);

此外，您在$('#widget-products ul.'+catId+'')

中还有其他引号

附加仅适用于第一项目

1 个答案: