动态创建多个下拉列表

Posted 2023-05-08

【中文标题】动态创建多个下拉列表

【英文标题】：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() 函数在 $addLinkBut​​ton 被点击时执行。

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 代码，所以我想它会起作用。 抱歉，我的代码需要重构 :)

【参考方案1】：

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