javascript - 将Javascript代码转换为jquery的问题
问题描述
我是 jquery 的新手,我想将下拉菜单的以下 javascript 代码转换为 jquery
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active1");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
到目前为止我的代码是
$(".dropdown-btn").each( function() {
$(this).click(function () {
var dropdownContent = $(this).parent().next();
dropdownContent.show();
alert(dropdownContent.val());
alert("jquery.....");
});
});
以下是 HTML 代码:
<button class="dropdown-btn">1</button>
<div class="dropdown-container">
<a href="" target="_blank">1</a>
<a href="" target="_blank">2</a>
<a href="" target="_blank">3</a>
</div>
<button class="dropdown-btn">2</button>
<div class="dropdown-container">
<a href="" target="_blank">3</a>
<a href="" target="_blank">1</a>
<a href="" target="_blank">2</a>
</div>
解决方案
看看并告诉我是否有效。
$(".dropdown-btn").click(function () {
$(this).toggle("active1");
var dropdownContent = $(this).next();
$(dropdownContent).toggle();
});
推荐阅读
- python - 带有 Python 乌龟的圆角矩形
- kubernetes - Istio Envoy Proxy 转发客户端证书信息
- vue.js - 如何在 vue/ionic4 中显示 html
- javascript - Javascript 问题 - setTimeout?
- javascript - Firebase 函数不发送通知
- dapper - 使用 sqlkata 查询复杂对象
- javascript - Cordorva-dialog-plugin 适用于 phonegap 但不适用于 Play 商店的应用程序发布
- lme4 - glmer 的边际效应
- vue.js - 如何以编程方式在 bootstrap-vue 模态正文和页脚中注入内容?
- r - 连接数据框和替换行