Question

我有导航叠加层，我想要做的是在点击链接时关闭导航。它适用于href="#"但我的链接是href="someplace.com"。如何在仍然使用href时关闭我的div？

`<script>
 $(document).ready(function(){
 $(".menu-wrapper a").click(function(){
 $(".overlay").fadeToggle(200);
 $(this).toggleClass('btn-open').toggleClass('btn-close');
 });
 });
 $('.overlay').on('click', function(){
 $(".overlay").fadeToggle(200);   
 $(".menu-wrapper a").toggleClass('btn-open').toggleClass('btn-close');
 open = false;
 });
 </script>`

，链接

`<li><a class="btn-close" href="<?php echo SITE_URL;    ?>profiles">Profiles</a></li>`

感谢您的帮助。

Answer 1

如果链接有href =“＃”页面没有重新加载，否则就会重新加载。你可以这样做：

<li><a class="btn-close" href="javascript:void(0)" onclick="closeOverlay()">Profiles</a></li>

然后写一个函数

function closeOverlay() {...}

您将关闭叠加层并调用AJAX来获取PHP数据

Answer 2

我的Jquery生锈了

Update-Database

Answer 3

浏览器中的事件级联向下然后向上。假设您有以下结构：

<html>
  <head>...</head>
  <body>
    <section>
      <p>Here is a <a href="#sample">link</a></p>
    </section>
  </body>
</html>

当您单击链接时，click事件将发送到按此顺序绑定到元素的任何事件侦听器：window, html, body, section, p, a, a, p, section, body, html, window。通过在onCapture调用上设置addEventListener布尔参数来确定事件是从上到下（捕获时）还是从下到上（在冒泡时）发生的事件。

您可以将事件绑定到捕获时触发的HTML文档，检查用户是否单击了链接，如果是，请关闭导航或任何您想要执行的操作。我不认为jquery支持事件捕获，你必须做到香草风格。

这里有一些JS跟随我的模型示例。这会向整个文档添加一个事件侦听器，当检测到单击时将触发该事件侦听器。然后它检查被点击的东西实际上是一个链接（<a>元素）。

document.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    alert("You've just clicked a link");
  }
}, true); // true to trigger on 'capture'

https://jsfiddle.net/gf9drum2/

用href关闭叠加层

3 个答案: