换成javascript代码function () { $(this).css({ backgroundColor: "transparent" }).children(".child-list").css({ display: "none" }) }) //5.切换tab $(".item-title").children(".more").find("li").hover(function () { $(this).addClass("active").siblings().removeClass("active"); $(this).parents(".c-item").find(".item-con").removeClass("active").eq($(this).index()).addClass("active") })
时间: 2023-11-15 22:05:10 浏览: 76
html、css、javascript语法手册(版).pdf
document.addEventListener("DOMContentLoaded", function() {
let parentList = document.querySelectorAll(".l-list > li");
for(let i = 0; i < parentList.length; i++) {
parentList[i].addEventListener("mouseenter", function() {
let childList = this.querySelector(".child-list");
childList.style.display = "block";
for(let j = 0; j < parentList.length; j++) {
if(j != i) {
parentList[j].querySelector(".child-list").style.display = "none";
parentList[j].style.backgroundColor = "transparent";
}
}
this.style.backgroundColor = "transparent";
});
parentList[i].addEventListener("mouseleave", function() {
this.querySelector(".child-list").style.display = "none";
this.style.backgroundColor = "";
});
let liList = parentList[i].querySelectorAll("li");
for(let j = 0; j < liList.length; j++) {
liList[j].addEventListener("mouseenter", function() {
this.style.color = "#ff6700";
});
liList[j].addEventListener("mouseleave", function() {
this.style.color = "#333";
});
}
}
let moreList = document.querySelectorAll(".item-title .more li");
for(let i = 0; i < moreList.length; i++) {
moreList[i].addEventListener("mouseenter", function() {
this.classList.add("active");
for(let j = 0; j < moreList.length; j++) {
if(j != i) {
moreList[j].classList.remove("active");
let itemConList = this.closest(".c-item").querySelectorAll(".item-con");
itemConList[j].classList.remove("active");
}
}
let itemConList = this.closest(".c-item").querySelectorAll(".item-con");
itemConList[i].classList.add("active");
});
}
});
阅读全文