Question

我想在主体和页脚中都有按钮，但似乎无法访问菜单，如果我将菜单粘贴到页脚中，它也不会让您单击页脚并立即关闭身体内的一个。

<!-- Connect Menu -->
<div id="menu">
  <nav>
    <a href = "mailto:adamshort1994@gmail.com" target = '_blank'>
      <img border = '0' src = 'images/emailicon.png'></a>
    <a href = "http://uk.linkedin.com/in/shortadam/" target = '_blank'>
      <img border = '0' src = 'images/linkedinicon.png'></a>
    <a href = "https://twitter.com/addrumm" target = '_blank'>
      <img border = '0' src = 'images/twittericon.png'></a>
  </nav>
</div>

按钮的功能：

<a id="openMenu">CONNECT</a>
<script>
  $("#openMenu").click(function() {
      var menu = $("#menu");
      if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {
          $(menu).hide();
        });
      } else {
        $(menu).show().animate({width: 100}, 1000);
      }
  });
</script>

如何将按钮放在页脚中并让两个脚本一起工作？

Answer 1

您的问题是由于您使用了多个必须唯一的id个问题而造成的。将它们改为使用类。

<a class='openMenu'>CONNECT</a>
...
<a class='openMenu'>CONNECT</a>

<强> JS

使用.字符参考按钮。

$(document).ready(function () {
    $(".openMenu").click(function() {
        var menu = $("#menu");
        if ($(menu).is(":visible")) {
            $(menu).animate({width: 0}, 1000, function() {
                $(menu).hide();
            });
        } else {
            $(menu).show().animate({width: 100}, 1000);
        }
    });
});

查看源代码后，问题就出现了，因为您多次设置事件。只需将上面的JavaScript添加到您的代码中一次，而不是每个按钮一次，因为它将事件附加到两个按钮。我把它放在文件中，准备确保两个按钮在被调用时都被加载。

两个按钮的行为不同的原因是因为第一个$(".openMenu").click()设置的时间仅存在第一个第一个按钮，而第二个按钮的第二个按钮存在。所以它调用show然后立即隐藏第一个按钮的代码。

如何在正文和页脚中使用此按钮？

1 个答案: