Javascript 当使用jquery切换时，按钮保持轻推

我有下面的代码，但当我单击菜单按钮时，所有其他菜单ITWM都会根据需要消失，但菜单按钮稍微向右移动。另外，如果我尝试向切换添加持续时间，“over mij”将变成两行。 有人能帮我吗？ -马克斯

好的——您需要将

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>

---

1） “按钮”的ID重复。ID必须是唯一的才能正常工作。2） 在jsfiddle.net上创建一个这样的示例。我用了你的代码，它似乎没有创建一个按钮。@TonyHinkle这很奇怪，使用google chrome它工作得很好，但只有按钮微动，但我似乎无法让小提琴工作。好吧——是的，不管什么原因，这在JSFIDLE中不起作用，但我现在已经在文件中找到了它，并在chrome中打开了。您可能需要将.menuBar CSS颜色更改为黑色，因为它被设置为白色，因此不可见。@TonyHinkle是的，背景应该是木材纹理，但我没有包括它，但您可以将主体中的背景颜色设置为黑色，这样就可以了，但是你知道发生了什么吗？你是想让菜单项在页面第一次加载时可见，还是只在点击“菜单”后才可见？

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;
}

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

.myButton {
    white-space: nowrap;
}