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

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的必须是唯一的多个相同的s而引起的.将它们更改为使用类.

<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然后立即隐藏第一个按钮的代码.