1

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

<!-- 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>

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

4

1 回答 1

7

导致您的问题是因为您使用了多个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()第一个按钮设置时，只有第一个按钮存在，第二个按钮两个按钮都存在。所以它调用显示然后立即隐藏第一个按钮的代码。

于 2013-04-23T00:51:27.620 回答