我有以下代码，但是当我单击菜单按钮时，所有其他菜单 itwms 都会根据需要消失，但菜单按钮会向右微移一点。另外，如果我尝试为切换添加持续时间，“over mij”会变成两行。 任何人都可以帮我吗？ -最大
<!DOCTYPE html>
<html>
<head>
<title> Homepagina </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<body>
<!-- dit zijun de elementen van de menubalk: -->
<div class="menuBar">
<ul>
<li> <a href="#" id="button"> Over mij </a> </li>
<li> <a href="#" id="button"> Hobbies </a> </li>
<li> <a href="#" id="menuButton"> MENU </a> </li>
<li> <a href="#" id="button"> Muziek </a> </li>
<li> <a href="#" id="button"> Informatica </a> </li>
</ul>
</div>
<!-- dit is de inhoud van de pagina: -->
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
<!-- dit is voor de menubalk acties: -->
<script>
$(document).ready(function(){
$("#menuButton").click(function(){
$("[id=button]").toggle();
});
});
</script>
</body>
</html>
body {
background-image: url(background.jpg);
margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
width: 100%;
}
.menuBar {
padding-left: 0px;
}
.menuBar ul li {
display: inline-block;
width: auto;
padding-right: 50px;
padding-left: 50px;
line-height: 70px;
}
.menuBar ul li a {
color: white;
width: 75px;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 36px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
#menuButton {
font-size: 46px;
position: relative;
}
.jumbotron .container {
height: 650px;
width: 60%;
position: fixed;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
最佳答案
好的——您需要将 id="button" 更改为不同的内容，因为 ID 需要是唯一的。如果您只需要一些东西作为选择器，您可以在这种情况下使用一个类。
以下是对 HTML 的更改:
<li> <a href="#" class="myButton"> Over mij </a> </li>
<li> <a href="#" class="myButton"> Hobbies </a> </li>
<li> <a href="#" id="menuButton"> MENU </a> </li>
<li> <a href="#" class="myButton"> Muziek </a> </li>
<li> <a href="#" class="myButton"> Informatica </a> </li>
接下来，在文档中添加一个开关，准备在页面加载时隐藏菜单项，并添加动画时间参数:
<script>
$(document).ready(function(){
//toggle myButton to hide them after the page loads.
// If they are hidden before the page loads, the positions
// change a bit when they are toggled and that is what
// is causing the main Menu button to move
$(".myButton").toggle(300);
$("#menuButton").click(function(){
$(".myButton").toggle(300);
});
});
</script>
最后，添加一个 CSS 规则来阻止包含两个单词的菜单项换行:
.myButton {
white-space: nowrap;
}
关于javascript - 使用 jquery 切换时，按钮会一直轻推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33134364/