单击搜索切换和导航切换,主体背景随不透明度变化,无需更改标题部分

fumotvh3  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(215)

搜索切换和导航切换点击身体背景改变不透明度,无需改变不透明度和标题部分的背景。
单击菜单或搜索栏,然后除标题外的其他部分必须更改颜色并添加不透明度为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");
  }
}

像这样期待

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题