Question

我尝试创建动态创建多个下拉菜单的新功能。对此，我使用jQuery。我达成了无法通过的问题。下面是创建＆＃34; themeMenu＆＃34; - 这是第一级下拉列表。

function addTheme(addBtn) {
$navTheme = $("#themeNavbar");

var $themeDropdown = $("<div>", { id:"themeDropdown", class: "dropdown" });

var $buttonDropdown = $("<button>", { class: "btn btn-secondary dropdown-toggle mr-1", type: "button" });
$buttonDropdown.attr("data-toggle", "dropdown");
$buttonDropdown.attr("aria-haspopup", "true");
$buttonDropdown.attr("aria-expanded", "false")
$buttonDropdown.popover();
$buttonDropdown.mouseenter(function (e) {
    $(this).dropdown("toggle");
});

var $buttonNameInput = $("<input>", { class: "text-dark w-75 theme-Name", type: "text", value: "Nowy temat" });
$buttonNameInput.keypress(function (e) {
    if (e.charCode === 13)
        applyName($buttonNameInput[0], e);
})

var $themedDMenu = $("<div>", { class: "dropdown-menu mt-0" });
$themedDMenu.attr("aria-labelledby", "themeDropdown");
$themedDMenu.mouseleave(function (e) {
    $(this).prev().dropdown("toggle");
})

var $addLinkButton = $("<a>", { class: "dropdown-item btn-manage", href: "#", text: "Dodaj" });
$addLinkButton.click(function (e) {
    addLink($addLinkButton, e);
})

var $divider = $("<div>", { class: "dropdown-divider" });
var $editLinkButton = $("<a>", { class: "dropdown-item btn-manage", href: "#", text: "Edytuj" });
var $deleteLinkButton = $("<a>", { class: "dropdown-item btn-manage", href: "#", text: "Usuń" });

$themedDMenu.append($addLinkButton);
$themedDMenu.append($divider);
$themedDMenu.append($editLinkButton);
$themedDMenu.append($deleteLinkButton);

$buttonDropdown.append($buttonNameInput);

$themeDropdown.append($buttonDropdown);
$themeDropdown.append($themedDMenu);

$navTheme.append($themeDropdown);
}

这是我用来创建＆＃34; themeLink＆＃34;的代码。这是附加到第一级的第二级下拉菜单。点击$ addLinkButton时执行addLink（）函数。

function addLink(addBtn, e) {

var newLink = $("<div>", { class: "dropdown-item"});

var newLinkHtml = $("<div>", { class: "dropright" });

var newLinkDropdown = $("<a>", {class: "dropdown-toggle"});
newLinkDropdown.attr("data-toggle", "dropdown");//.popover();
newLinkDropdown.attr("aria-haspopup", "true");
newLinkDropdown.attr("aria-expanded", "false");
newLinkDropdown.mouseenter(function (e) {
    $(this).dropdown("toggle");
})

var newLinkInput = $("<input>", { class: "text-dark w-75 theme-Name", type: "text", value: "Nowy link" });
newLinkInput.keypress(function (e) {
    if (e.charCode === 13)
        applyName(newLinkInput[0], e);
})

var newLinkDropdownMenu = $("<div>", { class: "dropdown-menu" });
newLinkDropdownMenu.mouseleave(function (e) {
    $(this).prev().dropdown("toggle");
    //e.preventDefault();
});

var editBtn = $("<a>", { class: "dropdown-item btn-manage", href: "#", text: "Edytuj" });
editBtn.click(function () {
    var $this = $(this);

    var dDToggle = $($this.parent(".dropdown-menu")[0].previousSibling);

    if (dDToggle.hasClass("named")) {
        var newLinkInput = $("<input>", { class: "text-dark w-75 theme-Name", type: "text", value: "Nowy link" });
        newLinkInput.keypress(function (e) {
            if (e.charCode === 13)
                applyName(newLinkInput[0], e);
        })
        dDToggle.html(newLinkInput);
    }
})

var deleteBtn = $("<a>", { class: "dropdown-item btn-manage", href: "#", text: "Usuń" });
deleteBtn.click(function () {
    var $this = $(this);

    var linkToRemove = $this.parents(".dropdown-item");
    linkToRemove.remove();
})

newLinkDropdownMenu.append(editBtn);
newLinkDropdownMenu.append(deleteBtn);

newLinkDropdown.append(newLinkInput);

newLinkHtml.append(newLinkDropdown);
newLinkHtml.append(newLinkDropdownMenu);

newLink.append(newLinkHtml);

addBtn.before(newLink);
}

正如您所看到的，我的下拉列表会对鼠标evenet做出反应 - 不仅仅是在 click（）上。当鼠标指针进入 $ buttonDropdown 时，一切正常。 dropdown（）方法切换类＆＃34;显示＆＃34;对于 $ themeDropdown ， $ themedDMenu 并切换＆＃34; aria-expanded＆＃34; $ buttonDropdown 上的attr。当指针进入 newLinkDropdown 时出现问题。方法 dropdown（）不仅适用于二级下拉列表元素（ newLinkHtml ， newLinkDropdown ， newLinkDropdownMenu ），还适用于在第一级元素（ $ themeDropdown ， $ themedDMenu ， $ buttonDropdown ）上。实际上，我的第一级下拉列表进入show-hide循环。当第一级dD列表是静态的（在html文件中添加）时，这个问题不会发生。但我写了基于HTML代码的jQuery代码，所以我想它会有效。对不起，我的代码需要重构：）

Answer 1

好的，所以我做了一些研究，找到了解决方案和答案。我到处使用<ul>和<li>代替<div>。非常好的例子我发现了here。此外，我发现此解决方案适用于Firefox，但不适用于我测试我的应用程序的Chrome。最后我发现了这个案例Bootstrap 4 Navbar with Dropdown and sub-dropdown

动态创建多个下拉列表

1 个答案: