javascript - 根据主下拉菜单选择有条件地显示或隐藏辅助 Twitter 引导下拉菜单

Question

我非常熟悉使用 Angular 时有条件地隐藏或显示元素。我不太熟悉直接使用 HTML 和 JS 来实现这一点。我有一个使用 twitter-bootstrap 3.4.0 的 HTML 页面。我最初想通过这个 HTML 页面显示一个主下拉菜单。然后，根据用户所做的选择，我想有条件地显示几个辅助下拉菜单之一。这是我的主下拉菜单 HTML:

<div class="dropdown">
  <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
    onclick="loadCategoryList()">
    Select Job Category
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" id="selectCategory"></ul>
</div>

这里是被引用的 JS:

let selectCat = document.getElementById("selectCategory");

// Load category list into drop-menu
async function loadCategoryList() {
  const categoryArr = ["option 1", "option 2", "option 3", "emailer"];
  while (selectCat.firstChild) {
    selectCat.removeChild(selectCat.firstChild);
  }
  for (let i = 0; i < categoryArr.length; i++) {
    let opt = categoryArr[i];
    let a = document.createElement("a");
    a.textContent = opt;
    a.setAttribute('href', '#');
    a.setAttribute('class', 'btn btn-link');
    let li = document.createElement("li");
    li.appendChild(a);
    selectCat.appendChild(li);
  }
}

然后我有一个辅助下拉菜单 div 节点，如下所示:

<div class="dropdown">
  <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
    onclick="loadEmailersList()">
    Select Email Type
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" id="selectEmailer"></ul>
</div>

我想要做的更改是，如果主类别列表下拉菜单中的选择是“电子邮件程序”，我只想显示此辅助“电子邮件程序”div 节点。换句话说，“电子邮件程序”下拉菜单节点应该隐藏，并且仅当主类别列表下拉菜单中的选择等于“电子邮件程序”时才可见。

我不清楚这种情况在 HTML 和 JS 中发生的情况有多少。如何使用 HTML、JS 和 Bootstrap 来完成此任务？

Answer 1

要修改元素的可见性，可以使用 jQuery 的 .hide() , .show() ，或.toggle()

您还可以确定 which item was clicked in a dropdown menu

要开始隐藏，您可以使用类似 style="display: none;"

放在一起，它应该看起来像这样:

// handle click event on dropdown menu item
$('#category .dropdown-menu').on('click', 'li a', function(e) {
  
  // determine which item was selected
  var selText = $(this).text();
  
  // determine whether email box should be visible
  var showEmail = selText === "Email"

  // show/hide visibility
  $('#box').toggle(showEmail);
});

#category, #box {
  margin: 10px;
}
#box {
    width: 200px;
    height: 100px;
    background: cornflowerblue;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="dropdown" id="category">
  <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" 
          type="button" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true">
    Pick Category
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Email</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

<div id="box" style="display: none;"> Email </div>