Question

编辑：我稍微清理了代码并缩小了问题范围。

所以我在Wordpress网站上工作，我试图将下拉菜单合并到我的移动菜单中，这意味着我必须使用jQuery来分配类和id到我现有的元素。我有这个代码已经在预制HTML上运行，但在动态创建的id上失败了。

以下是代码：

...
var menuCount = 0;
var contentCount = 0;
//find the mobile menu items
var submenus = $('[title="submenu"]');
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) {
    console.log(submenus);
    submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>');
    submenus.each(function() {
        $(this).attr("href", "#m" + menuCount++);
    })
    var content = submenus.parent().find('ul.sub-menu');
    content.addClass('dropdown-content');
    content.each(function() {
        $(this).attr("id", "m" + contentCount++);
    })
}

$(document).on('click', '.dropdown-title', function(e) {
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) {
        $(this).removeClass('d-active');
        $(currentAttrValue).slideUp(300).removeClass('d-open');
    } else {
        $('.dropdown-title').removeClass('d-active');
        $('.dropdown-content').slideUp(300).removeClass('d-open');
        $(this).addClass('d-active');
        console.log($(currentAttrValue));

        //THIS LINE FAILS
        $(currentAttrValue).slideDown(300).addClass('d-open');
    }

    e.preventDefault();

});

我已使用dropdown-title在课程$(document).on(...)中注册了这些元素，但我无法弄清楚我需要做些什么来使用自定义ID注册元素＆＃39;秒。我已经尝试将事件回调放在.each函数中，我尝试过触发自定义事件，但是没有一个会触发第二行到最后一行代码。控制台中没有错误，当我控制台登录时，我得到了这个：

[ul #m0.sub-menu.dropdown-content，context：document，selector：＆＃34; #m0＆＃34;] 0 ： UL＃m0.sub-menu.dropdown内容上下文：文献长度： 1 选择：＆＃34;＃M0＆＃34; 的原：对象[0]

所以jQuery知道元素在那里，我只是无法弄清楚如何注册它......或者它可能是我想不到的东西，我不知道知道。

Answer 1

如果您要动态创建元素，则应分配.on＆＃39;点击＆＃39;在创建这些元素之后。只需声明点击次数即可。在添加id和类之后发布的回调代码，而不是在页面加载时发布的，因此它会附加到.dropdown-title类的元素。

检查这个jsFiddle：https://jsfiddle.net/6zayouxc/

编辑：您编辑的JS代码有效......您的HTML或CSS也可能存在问题，您是否隐藏了子菜单？确保你没有让它们变得透明。

Answer 2

您尝试为属性而不是元素调用函数。你可能想要$(this).slideDown(300).addClass('d-active');（之前你也不需要$(this).addClass('d-active');）

Answer 3

在submenus.each圈内添加你的回调监听器。

当您动态添加类dropdown-title时，它在dom加载时无法使用，这就是事件侦听器未附加这些元素的原因。

var menuCount = 0;
var contentCount = 0;
//find the mobile menu items
var submenus = $('[title="submenu"]');
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) {
    console.log(submenus);
    submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>');
    submenus.each(function() {
        $(this).attr("href", "#m" + menuCount++);

        // add callback here
        $(this).click( function(e) {
            var currentAttrValue = $(this).attr('href');

            if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) {
                $(this).removeClass('d-active');
                $(currentAttrValue).slideUp(300).removeClass('d-open');
            } else {
                $('.dropdown-title').removeClass('d-active');
                $('.dropdown-content').slideUp(300).removeClass('d-open');
                $(this).addClass('d-active');
                console.log($(currentAttrValue));

                $(currentAttrValue).slideDown(300).addClass('d-active');
            }

            e.preventDefault();

        });


    })
    var content = submenus.parent().find('ul.sub-menu');
    content.addClass('dropdown-content');
    content.each(function() {
        $(this).attr("id", "m" + contentCount++);
    })
}

Answer 4

原来我的问题是jQuery正在添加移动菜单和桌面菜单，当我搜索jQuery找到的那个ID时，首先加载桌面菜单。事实证明我对自己的怀疑是完全错误的。

jQuery slideDown没有处理具有动态分配标识

4 个答案: