Question

我有这个代码：

document.querySelectorAll(".footer-link-has-sub-menu > a").forEach(el => {
  el.addEventListener("click", event => {
    event.preventDefault();
    window.x = event;
    const path = event.path || (event.composedPath && event.composedPath());
    const target = path.filter(x => x.tagName == 'A')[0];
    const ul = target.parentElement.querySelector("ul");


    if (getComputedStyle(ul).display == 'none') {
      ul.style.display = 'block'
    } else {
      ul.style.display = 'none'
    }
  })
})

footer ul {
  display: flex;
  list-style: none;
  margin: 10px;
  justify-content: space-around;
}

.footer_text {
  display: none;
}

.footer_img {
  height: 50px;
}

footer.footer {
  background: #00000073;
  backdrop-filter: blur(5px);
  position: fixed !important;
  border-top: 0 !important;
  box-shadow: 0 0 4px 0px white;
}

.footer .container>ul {
  padding: 10px;
  margin: 0;
}

.footer-sub-menu {
  background: #ffffff8a;
  border-radius: 5px;
  padding: 0 15px;
  color: #000;
  display: none;
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin: 10px 0;
  transform: translate3d(-50%, 0, 0);
  backdrop-filter: blur(10px);
}

.footer-sub-menu img {
  height: 30px;
  width: 30px;
}

.footer-link-has-sub-menu {
  position: relative;
}

<footer class="border-top footer text-muted">
  <div class="container">
    <ul class="col-sm">
      <li class="footer-menu-link">
        <a class="footer-link" href="/%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%86%D1%96%D1%8F">
          <img class="footer_img" src="images/icons/meat.svg">
        </a>
      </li>
      <li class="footer-menu-link footer-link-has-sub-menu">
        <a class="footer-link">
          <img class="footer_img" src="reduced/icons/user_light.png">
        </a>
        <ul class="footer-sub-menu" style="display: none;">
          <li>
            <a href="/Identity/Account/Manage" class="footer-link">
              <img src="reduced/icons/account.svg">
            </a>
          </li>
          <li>
            <form class="form-inline" action="/Identity/Account/Logout" method="post">
              <button type="submit" style="padding: 10px 0" class="nav-link btn btn-link text-dark"><img src="reduced/icons/sign_out.svg"></button>
            </form>
          </li>
        </ul>
      </li>
      <li class="footer-menu-link footer-link-has-sub-menu">
        <a class="footer-link" href="/%D0%94%D1%80%D1%83%D0%B3%D0%BE%D0%B5">
          <img class="footer_img" src="reduced/menu_item_img12_1.png">
        </a>
        <ul class="footer-sub-menu" style="display: none;">
          <li>
            <a class="footer-link" href="/%D0%9F%D1%80%D0%BE%D0%BD%D0%B0%D1%81">Про нас</a>
          </li>
          <li>
            <a class="footer-link" href="/%D0%9C%D0%B5%D1%80%D0%B5%D0%B6%D0%B0">Мережа</a>
          </li>
          <li>
            <a class="footer-link" href="/%D0%94%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B0">Доставка</a>
          </li>
          <li>
            <a class="footer-link" href="/%D0%9A%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D0%B8">Контакти</a>
          </li>
        </ul>
      </li>
    </ul>


  </div>
</footer>

为什么背景过滤器不起作用？我认为这是位置问题：绝对。我正在尝试使用下拉菜单为移动设备创建底部菜单。为什么它不起作用？我需要 .footer-sub-menu 来设置背景过滤器

我看到了这个帖子： Backdrop-filter: Blur not working on a position absolute element

但是没有答案。有人可以帮我吗？

这是我网站的链接：

https://xn--e1anjf9esbe.com.ua/

此菜单位于页脚中，仅在移动设备上显示。

背景过滤器不适用于位置：绝对

0 个答案: