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

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() 设置时只有第一个第一个按钮存在，在第二个按钮上两个按钮都存在。因此它调用显示，然后立即为第一个按钮隐藏代码。