如何编写下拉切换按钮的逻辑？ [关闭]答案

【问题标题】：How to write the logic for a drop down toggle button? [closed]如何编写下拉切换按钮的逻辑？ [关闭]
【发布时间】：2022-01-02 18:17:49
【问题描述】：

我有两个下拉菜单按钮。我只有一个功能可以在两个下拉菜单之间切换。当我单击另一个下拉菜单时，我需要关闭一个下拉菜单，并显示右键的下拉菜单（下拉菜单应该只显示下拉菜单）。我应该如何为此编写逻辑？

<div class="dropdown">
<button onclick="myFunction()" >Dropdown-one</button>
<button onclick="myFunction()" >Dropdown-two</button>
<div id="myDropdown-one" class="dropdown-content">
    <h1>First Drop down</h1>
</div>
<div id="myDropdown-two" class="dropdown-content">
    <h1>Second Drop down</h1>
</div>

function myFunction() {
  if ( ?? ?? ? ) {
    document.getElementById("myDropdown-one").classList.toggle("show");
    document.getElementById("myDropdown-two").classList.toggle("show");
  }
}

【问题讨论】：

我建议您在网络上查看一些教程以获取有关逻辑的灵感。 Stack Overflow 不是“如何” 教程服务。这个问题不符合help center 中规定的准则

标签： javascript html css if-statement

【解决方案1】：

您可以通过为每个按钮添加 ID 并在调用函数时使用它来实现这一点，因此函数知道哪个按钮正在调用它。

我们为每个按钮添加一个data-for 属性，其值设置为相应下拉列表的ID。而在调用函数时，我们通过使用this.getAttribute('data-for') // 'this' refers to the button.调用传递属性我们有一个函数中所有下拉列表的列表。我们移除被点击的那个，显示被点击的那个，并隐藏所有其他的（在这种情况下，它只有一个，但它也可以用于 2+ 个下拉菜单。）

注意我们在属性前面使用data-。这不是必需的，但对于非内置属性，这是常见的做法。

function myFunction(id) {
  const dropdowns = ['myDropdown-one', 'myDropdown-two']
  dropdowns.splice(dropdowns.indexOf(id), 1)
  
  document.getElementById(id).classList.add('show')
  dropdowns.forEach(dropdown => {
    document.getElementById(dropdown).classList.remove('show')
  })
}

.dropdown-content {
  display: none;
}

.show {
  display: block;
}

<button data-for="myDropdown-one" onclick="myFunction(this.getAttribute('data-for'))" >Dropdown-one</button>

<button data-for="myDropdown-two" onclick="myFunction(this.getAttribute('data-for'))" >Dropdown-two</button>

<div id="myDropdown-one" class="dropdown-content">
    <h1>First Drop down</h1>
</div>

<div id="myDropdown-two" class="dropdown-content">
    <h1>Second Drop down</h1>
</div>

【讨论】：