动态创建多个下拉列表答案

【问题标题】：Dynamically creating multiple dropdown list动态创建多个下拉列表
【发布时间】：2018-07-22 18:32:24
【问题描述】：

我尝试创建动态创建多个下拉菜单的新功能。为此，我正在使用 jQuery。我遇到了我无法通过的问题。下面是创建“themeMenu”的代码 - 这是第一级下拉列表。

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

这是我用来创建“themeLink”的代码，它是附加到第一级的第二级下拉菜单。 addLink() 函数在 $addLinkButton 被点击时执行。

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

正如您所见，我的下拉列表对鼠标事件做出反应 - 不仅在 click() 上。当鼠标指针进入 $buttonDropdown 时，一切正常。 dropdown() 方法为 $themeDropdown、$themedDMenu 切换类“显示”并在 $buttonDropdown 上切换“aria-expanded”属性。当指针进入 newLinkDropdown 时出现问题。 dropdown() 方法不仅适用于二级下拉列表元素（newLinkHtml、newLinkDropdown、newLinkDropdownMenu），还适用于在第一级元素上（$themeDropdown、$themedDMenu、$buttonDropdown）。实际上，我的第一级下拉列表进入了显示隐藏循环。当第一级 dD 列表是静态的（添加到 html 文件中）时，不会发生此问题。但是我基于 html 代码编写了 jQuery 代码，所以我想它会起作用。抱歉，我的代码需要重构 :)

【问题讨论】：

标签： javascript jquery html twitter-bootstrap drop-down-menu

【解决方案1】：

好的，所以我做了一些研究并找到了解决方案和答案。我到处使用<ul> 和<li> 而不是<div>。我找到了here 的很好的例子。我还发现该解决方案适用于 Firefox，但不适用于我测试我的应用程序的 Chrome。终于找到了这个案例Bootstrap 4 Navbar with Dropdown and sub-dropdown

【讨论】：