Question

我有以下代码但是当我点击菜单按钮时，所有其他菜单itwms按需要消失，但菜单按钮稍微向右微移。如果我尝试为切换添加持续时间，＆＃34;超过mij＆＃34;变成两条线。任何人都可以帮我吗？ -max

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

Answer 1

好的 - 您需要将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;
}

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

1 个答案: