Question

当我点击菜单图标时，有时它会起作用但刷新3或4次后会停止。根本不在Chrome中工作。我错过了什么。请帮忙。

$(function () {
  const menu = $(".fa-3x");
  const list = $(".show");
  const main = $("#firstpage");
  const last = $("#secondpage");

  menu.on("click", _=> {
    $(".show").toggleClass("hide");
  });
});

Mock-up Site here - codepen

Answer 1

查询选择器错误。 $(".show").toggleClass("hide");

最好使用#menulinks访问相关的lu元素。

$("#menulinks").on("click", _=> {
   $("#menulinks ul").toggleClass("hide");
});

<强>演示

/* jshint esversion:6 */
/* global $ */


$(function () {

    $("#menulinks").on("click", _=> {
       $("#menulinks ul").toggleClass("hide");
    });


});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* makes the image fill entire screen*/
}


.name,
.scroller {
    position: absolute;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /* makes text in perfect mid*/
}

h1 {
    font-family: "Inconsolata", monospace;
    text-transform: uppercase;
}

.name {
    top: 45%;
}

.show {
    width: 130px;
    background: rgba(3, 4, 32, 0.54);
    position: relative;
    left: 43px;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    transition: 0.3s;
}

.fa-3x:hover,
#arrow:hover {
    cursor: pointer;
    opacity: 0.75;

}

.hidden li:hover a,
.name,
a:hover {
    background: linear-gradient(to right, #215AF6, #F2359D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

.info {
    font-size: 350%;
    padding: 0;
    margin-bottom: 20px;
    letter-spacing: 5px;
}

.description {
    letter-spacing: 4px;
    word-spacing: 5px;
}

header {
    background: linear-gradient(rgba(17, 20, 42, 0.95), rgba(17, 20, 42, 0.95)), url("https://images.pexels.com/photos/399636/pexels-photo-399636.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center;
    background-attachment: fixed;
    background-size: cover;
    text-transform: uppercase;
    height: 100vh;
    color: white;
}

#secondpage {
    background-size: cover;
    height: 100vh;

}

div.scroller {
    position: absolute;
    top: 95%;
    left: 50%;

}

.scrolltext {
    font-size: 10px;
    letter-spacing: 3px;
    padding-top: 0;
}

.material-icons.md-100 {
    font-size: 100px;
    margin-top: -20px;
}

#menulinks {
    text-align: left;
    padding: 20px;
}

nav p {
    font-size: 65%;
    letter-spacing: 4px;
}

li a {
    text-decoration: none;
    color: white;
    padding-left: 10px;
    font-size: 90%;

}

ul {
    list-style: none;

}

li {
    padding: 5px;

}

.hide {
    opacity: 0;
    visibility: hidden;
}

.show li:hover {
    background: rgba(3, 4, 32, 1);
    padding-left: 12px;
    transition: 0.3s;

}

.dp {
    max-width: 400px;
    max-height: 200px;
    filter: grayscale(100%);
}


#bottom {
    max-height: 110px;
    max-width: 350px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 230px;
    margin-bottom: 50px;
    text-align: center;

}

#summary,
#greeting {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
}

#greeting {
    letter-spacing: 10px;
    word-spacing: 10px;

}

#summarytext,
#span {
    line-height: 150%;
    font-size: 20px;
}

#span {
    margin-top: 30px;
}

.fa-2x {
    opacity: 0.1;
}

<html lang="en">

<head>
    <title>Brian Profile</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <header id="firstpage">
        <nav id="menulinks">
            <i class="fas fa-align-justify fa-3x"></i>
            <p>menu</p>
            <ul class="hide">
                <li id="firstopt"><a href="#">About</a></li>
                <li id="secondopt"><a href="#">Experience</a></li>
                <li id="thirdopt"><a href="#">Portfolio</a></li>
                <li id="fourthopt"><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="name">
            <h1 class="info">Hello, I'm Brian</h1>
            <p class="description">an aspiring web developer</p>
        </div>
        <div class="scroller">
            <p class="scrolltext"> SCROLL DOWN</p>
            <i class="material-icons md-100" id="arrow">expand_more</i>
        </div>
    </header>
    <footer id="secondpage">
        <div id="bottom">
            <p>
                <img src="https://dl.dropbox.com/s/3c0xlv56hhb1ed7/2013-07-20%2021.58.43.jpg?=raw1" alt="InstaPic" class="dp"></p>
        </div>
        <div id="greeting">
            <span>HI THERE</span>
            <p><i class="far fa-window-minimize fa-2x"></i></p>
        </div>
        <div id="summary">
            <p id="summarytext">
                I am a web developer based in <a href="#">London</a>. With a growing Portfolio that is constantly updated, I have a passion for all things 'web'.</p>
            <p id="span"><span>For more information visit my <a href="#" class="blog">Blog</a>.</span>
            </p>



        </div>

    </footer>


    <script src="scripts.js"></script>

</body>

</html>

我的JQuery不能在Chrome上运行，有时可以在firefox上运行然后停止

1 个答案: