是否可以创建一个控制多个下拉菜单的 javascript
Is it possible to create one javascript that controls multiple dropdown menus?
我创建了一个非常简单的javascript:
function dropdownFunction() {
document.getElementById("dropdown").classList.toggle("show");
}
使用以下 HTML:
<div class="dropdown">
<button onclick="dropdownFunction()" class="dropbtn">Dropdown</button>
<div id="dropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
但是,当我使用相同的HTML代码创建第二个下拉按钮时,正如您所期望的那样,单击它会打开第一个按钮下拉菜单。我想知道是否可以修改该脚本,以便我可以对所有下拉列表使用该功能,而不是必须为我在网站上使用的每个下拉按钮创建新函数。
当然。调用函数时,传递对单击的元素的引用:
onclick="dropdownFunction.call(this)"
。然后在函数中使用该引用查找适当的div:
this.parentNode.querySelector(".dropdown-content").classList.toggle("show");
以下是上述内容在上下文中的工作演示:
function dropdownFunction() {
this.parentNode.querySelector(".dropdown-content").classList.toggle("show");
}
.dropdown-content {
display: none;
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropdownFunction.call(this)" class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button onclick="dropdownFunction.call(this)" class="dropbtn">Dropdown 2</button>
<div class="dropdown-content">
<a href="#">Link A</a>
<a href="#">Link B</a>
<a href="#">Link C</a>
</div>
</div>
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 基于下拉菜单创建开关
- 动态填充两个下拉菜单
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- JavaScript下拉菜单-部件在Mac上消失
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 从选择下拉菜单中获取数据
- 我将如何控制下拉选择菜单的位置
- 是否可以创建一个控制多个下拉菜单的 javascript