JS连结无法运作

时间:2018-08-13 10:12:57

标签: javascript jquery html css

我只想制作外部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>

1 个答案:

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