我只想制作外部JS文件，然后在其中进行Web编辑。但是，当我尝试链接时，某些命令有效，而其他命令则无效。例如。单击时可使用切换，但是单击菜单中的链接时，该菜单不会隐藏并且不会使用动画进行滚动。
这是代码：但是在jsfiddle中它可以正常工作，当我尝试制作外部script.js时，它无法正常工作
$( document ).ready(function() {
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
});
$(document).ready(function() {
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
});
});
$(document).ready(function($){
$('a').on('click', function(e){
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ( $hrefStart == "#" ) {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
})(jQuery);@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
z-index: 999;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
z-index: 99999;
}
.site-nav--open {
height: 100vh;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #2ecc71;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
width: 100%;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%,-50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
span.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
@media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.show {
}
.text {
color: #fff;
position: absolute;
top: 50%;
left: 10%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<a href="#particles-js" class="logo"><h1 class="logo">Lorem <span>ipsum</span></h1></a>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">Manipulations</a></li>
<li><a class="menu-link" href="#portfolio">Works</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main"></h1>
<div class="text"><p>sssss</p></div>
</div>
<span class="home">Home</span>
<a href="#" class="about"><span class="about">About</span></a>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="script.js"></script>
</body>
</html>
答案 0 :(得分：2)
只需尝试此脚本的剥离版本...无需使用多个document.ready函数...，如果'$'为$，也无需在document.ready函数中使用jquery别名（'$'）名称。不会与任何其他库冲突...
$(document).ready(function(){
$('a').on('click', function(e){
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ( $hrefStart == "#" ) {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
});
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
});@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
z-index: 999;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
z-index: 99999;
}
.site-nav--open {
height: 100vh;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #2ecc71;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
width: 100%;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%,-50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
span.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
@media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.show {
}
.text {
color: #fff;
position: absolute;
top: 50%;
left: 10%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<a href="#particles-js" class="logo"><h1 class="logo">Lorem <span>ipsum</span></h1></a>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">Manipulations</a></li>
<li><a class="menu-link" href="#portfolio">Works</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main"></h1>
<div class="text"><p>sssss</p></div>
</div>
<span class="home">Home</span>
<a href="#" class="about"><span class="about">About</span></a>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="script.js"></script>
</body>
</html>