[英]How can I use this button in both the body and footer?
I would like to have the button in both the body and footer but it seems like it can't access the menu and if I paste the menu in the footer as well it doesn't let you click the footer one and instantly closes the one inside the body. 我想同时在页眉和页脚中都具有该按钮,但似乎无法访问该菜单,并且如果我也将菜单粘贴到页脚中,则无法让您单击页脚并立即关闭该页脚在体内。
<!-- 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>
The button's function: 该按钮的功能:
<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>
How would I go about putting the button in the footer and have the two scripts work together? 如何将按钮放在页脚中并使两个脚本一起工作?
Your issue is being caused because you're using multiple of the same id
s which must be unique. 造成您的问题的原因是,您使用的多个相同id
必须是唯一的。 Change them to use classes instead. 更改它们以使用类。
<a class='openMenu'>CONNECT</a>
...
<a class='openMenu'>CONNECT</a>
JS JS
Refer to the button using the .
使用查阅按钮.
character. 字符。
$(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);
}
});
});
After looking at your source, the problem is occurring because you're setting up the event multiple times. 查看您的来源后,由于您多次设置事件,因此出现了问题。 Just add the above JavaScript once to your code, not once per button, as it attaches the event to both buttons. 只需将上述JavaScript一次添加到您的代码中,而不是将每个按钮添加一次,因为它将事件附加到两个按钮上。 I put it in document ready to ensure both buttons are loaded when it's called. 我将其放在准备就绪的文档中,以确保在调用时都加载了两个按钮。
The reason that both buttons act differently is because the when the first $(".openMenu").click()
is setup only first first button exists, on the second one both buttons do. 两个按钮的行为不同的原因是,当设置第一个$(".openMenu").click()
时,仅存在第一个第一个按钮,而在第二个上,两个按钮都存在。 So it calls the show and then hide code immediately for the first button. 因此它调用show,然后立即为第一个按钮隐藏代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.