个人中心
gpt4 book ai didi

javascript - 更改菜单打开和关闭时的文本

转载 作者：行者123 更新时间：2023-11-28 01:31:11 26 4
gpt4 key购买 nike

目前我的导航栏文本是Menu，当它被点击时我希望Menu变为Close，当菜单关闭时它应该回到说Menu

这是我的当前代码 - 单击它会更改为“关闭”但不会变回:

jQuery(document).ready(function() {

    jQuery(".menu-Trigger").click(function() {

        jQuery(".nav-menu").slideToggle(400, function() { 
             jQuery(this).toggleClass("nav-Expanded").css("display", "");

          });
        $(".menu-Trigger").html("Close");
    });
});

HTML 和 CSS 代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Arshdeep Soni</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, inital-scale=1">

        <link rel="stylesheet" type="text/css" href="reset.css">
        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="script.js">
        </script>

        <style type="text/css">

            body {
                background-image: url(Final6Lower.jpg);
                background-size: auto 100%;
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-position: center center;

            }

            .nav-menu li, .nav-menu a{
                display: inline-flex;
                color: rgb(137, 134, 134);
                text-decoration: none;
                font-family: Raleway;
                padding-right: 15px;
                font-size: 12px;
                letter-spacing: 7px;

            }
            .nav-menu {
                margin-top: 25px;
                text-align: center;
            }

            .nav-menu li, .nav-menu a:hover {
                color:white;
            }

            .socialIcons img {
                height: 50px;
                width: 50px;
                opacity: 0.4;
                filter: alpha(opacity=40);
                margin-right: 10px;
            }
            icons img {
                position:relative;
                display: inline;
                margin-right: 0 auto;
                margin-left: 0 auto;
            }

            .icons {
                text-align: center;
                position:absolute;
                bottom:10px;
                left:0;
                width: 100%;

            }

            .socialIcons img:hover {
                opacity:1;
                color:white;
            }

            .menu-Trigger {
                display:none;
            }

            div.nav-menu ul {
                margin:0;
                padding:0;
            }

            div.nav-menu ul li {
                list-style: none;
            }


            @media screen and (max-width: 600px) {

                .menu-Trigger {
                    display: block;
                    color:white;
                    background-color: black;
                    padding:10px;
                    text-align: center;
                    cursor:pointer;
                    font-family: raleway;
                }

                div.nav-menu ul li {
                    display:block;
                    float:none;
                    padding:8px;
                    background-color: black;
                }

                div.nav-menu {
                    display:none;
                }

                div.nav-Expanded {
                    display: block;
                }
            }


        </style>
    </head>

    <body>

        <div class="header">
        </div>                    

        <span class="menu-Trigger" align="center" >Menu</span>
        <div class="nav-menu">
            <ul>
                <li><a href=#>HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li><a href=#>IMAGES</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li><a href=#>CONTACT</a></li>
            </ul>
        </div>

            <div class="icons">
                <a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
        <a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="fb.png" /></a>
                <a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="twitter.png" /></a>
            </div>
    </body>
</html>

最佳答案

我认为您只是缺少检查菜单是否展开的 if 表达式。不确定您的 html，但这可能有效:

jQuery(document).ready(function() {

    jQuery(".menu-Trigger").click(function() {

        jQuery(".nav-menu").slideToggle(400, function() { 
             jQuery(this).toggleClass("nav-Expanded").css("display", "");

          });
        if (jQuery(this).hasClass("nav-Expanded"))
            $(".menu-Trigger").html("Close");
        else
            $(".menu-Trigger").html("Menu");
    });
});

关于javascript - 更改菜单打开和关闭时的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30216706/

26 4 0
文章推荐： html - '.row' 中整个一半的 '.col-md-6' 的 CSS 背景
文章推荐： javascript - Selenium FindElement 会阻塞，直到文件上传完成
文章推荐： javascript - 如何在特定类(class)之前选择 previous sibling 姐妹？
文章推荐： javascript - 如何通过jquery(或js)定义附加到具有不同聊天集的任何网页的某个dom的聊天集