搜索切换和导航切换点击身体背景改变不透明度,无需改变不透明度和标题部分的背景。
单击菜单或搜索栏,然后除标题外的其他部分必须更改颜色并添加不透明度为0.5。
在某处单击,然后释放功能菜单并搜索关闭
let navToggle = document.querySelector(".nav__toggle");
let navWrapper = document.querySelector(".nav__wrapper");
navToggle.addEventListener("click", function () {
if (navWrapper.classList.contains("active")) {
this.setAttribute("aria-expanded", "false");
this.setAttribute("aria-label", "menu");
navWrapper.classList.remove("active");
} else {
navWrapper.classList.add("active");
this.setAttribute("aria-label", "close menu");
this.setAttribute("aria-expanded", "true");
searchForm.classList.remove("active");
searchToggle.classList.remove("active");
}
});
let searchToggle = document.querySelector(".search__toggle");
let searchForm = document.querySelector(".search__form");
searchToggle.addEventListener("click", showSearch);
function showSearch() {
searchForm.classList.toggle("active");
searchToggle.classList.toggle("active");
navToggle.setAttribute("aria-expanded", "false");
navToggle.setAttribute("aria-label", "menu");
navWrapper.classList.remove("active");
if (searchToggle.classList.contains("active")) {
searchToggle.setAttribute("aria-label", "Close search");
} else {
searchToggle.setAttribute("aria-label", "Open search");
}
}
像这样期待
暂无答案!
目前还没有任何答案,快来回答吧!