时间戳

首页 > 解决方案 > 使用 Bootstrap 4 在单行上创建动态下拉项

javascript - 使用 Bootstrap 4 在单行上创建动态下拉项

问题描述

我在 HTML/EJS 页面上有以下代码，用于在导航菜单中创建下拉列表...这是使用 Bootstrap 4：

<div class="dropdown" id="account_info">
 <button type="button" class="btn btn-elegant" id="dropdownMenuButton" data-toggle="dropdown"><i class="icon-user-circle"></i>  User</button>
 <div class="dropdown-menu" id="drop_down">

 </div>
</div>

我的外部 Javascript 文件中的以下代码用于使用适当的“下拉项目”填充下拉列表：

var _status = vitals.dataset.user;  //retrieve passed 'cookie' information...

  if (_status != "none") {

    elem = document.getElementById("account_in");

    if (elem) { 
    elem.parentNode.removeChild(elem);  //remove 'login' item
    }

    elem_set = document.createElement("a");
    elem_set.className = "drop-down-item";
    elem_set.id = "account_page";
    elem_set.href = "/clientdashboard/" + _status;
    elem_set.appendChild(document.createTextNode("Account"));
    document.getElementById("drop_down").appendChild(elem_set);

    elem_set = document.createElement("a");
    elem_set.className = "drop-down-item";
    elem_set.id = "account_out";
    elem_set.appendChild(document.createTextNode("Logout"));
    document.getElementById("drop_down").appendChild(elem_set);

  } else {

  elem_set = document.createElement("a");
  elem_set.className = "drop-down-item";
  elem_set.id = "account_in";
  elem_set.href = "/login";
  elem_set.appendChild(document.createTextNode("Login"));
  document.getElementById("drop_down").appendChild(elem_set); 

  }  //"user" cookie has passed...OR NOT...

我的问题是，当我创建多个“下拉项目”...例如“帐户”和“注销”时，它们会在下拉菜单中“并排”出现，而不是像我预期的那样出现在单独的行上.

我认为任何新创建的“下拉项目”都会在下拉菜单中占据不同的行......任何关于问题所在的建议将不胜感激。我提前谢谢你。

标签： javascriptbootstrap-4drop-down-menu

解决方案

推荐阅读