javascript - 脚本在 html 中有效，但在 javascript 文件中无效

Question

最终更新问题已解决。谢谢你们。 Prepros 将我的 js 文件编译到 main-dist 中。新代码在那里而不是我的 main.js。感谢所有帮助我的人。

更新 Able to reproduce the nonworking code in jsBin

我想知道为什么在调用 jquery 文件后该函数在我的 js 文件中不起作用，但脚本在我的 HTML 文件中起作用。
我希望该函数位于我的 js 文件中，因此它不在我的每个 HTML 文件中。

Example 1 in html on jsFiddle

Example 2 in html

var navBar = function() {

    var pull = $('#pull');
    var menu = $('nav ul');

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
    }
    }); 
};

$(document).ready(navBar);

非常长的片段。 导航栏代码也可以在代码片段中工作，但当我在浏览器中加载时它不起作用

//time on front page
function displayTime () {
	var elt = document.getElementById("clock");
	var now = new Date();
	elt.innerHTML = now.toLocaleTimeString();
	setTimeout (displayTime, 1000);
};
displayTime();
/*
	function menu(){
		$('.tMenu').click(function(){
			$('nav ul').slideToggle();
		})
	}
	menu(); */

	var navBar = function() {
		
	    var pull = $('#pull');
	    var menu = $('nav ul');
	 
	    $(pull).on('click', function(e) {
	        e.preventDefault();
	        menu.slideToggle();
	    });

	    $(window).resize(function(){
		    var w = $(window).width();
		    if(w > 320 && menu.is(':hidden')) {
		        menu.removeAttr('style');
	    }
		}); 
	};

	$(document).ready(navBar);


//slider main page
var main = function(){


	$('.arrow-next').click(function(){
		var currentSlide = $('.active-slide');
		var nextSlide = currentSlide.next();

		var currentDot = $('.active-dot');
		var nextDot = currentDot.next();

		if (nextSlide.length === 0) {
			nextSlide = $('.slide').first();
			nextDot = $('.dot').first();
		}

		currentSlide.fadeOut(500).removeClass('active-slide');
		nextSlide.fadeIn(500).addClass('active-slide');

		currentDot.removeClass('active-dot');
		nextDot.addClass('active-dot');
	});

	$('.arrow-prev').click(function(){
		var currentSlide = $('.active-slide');
		var prevSlide = currentSlide.prev();

		var currentDot = $('.active-dot');
		var prevDot = currentDot.prev();

		if(prevSlide.length === 0) {
     	 	prevSlide = $('.slide').last();
     		prevDot = $('.dot').last();
     	}
     	currentSlide.fadeOut(500).removeClass('active-slide');
     	prevSlide.fadeIn(500).addClass('active-slide');

     	currentDot.removeClass('active-dot');
     	prevDot.addClass('active-dot');
	});


	$('.dot').click(function(){
		var index = $(this).index(); // get the index or position of the current element that has the class .dot
		$('.slide').fadeOut(500); // to hide all elements with class .slide
		$('.dot').removeClass('active-dot');
		$('.slide').removeClass('active-slide').addClass('active');
		$('#slide' + (index+1)).fadeIn(500); 
		$('#slide' + (index+1)).removeClass('active').addClass('active-slide');
		$(this).addClass('active-dot');
		});
	
};

$(document).ready(main);

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

nav {
  background: #17181D;
  border-bottom: 1px solid #0A0A0A;
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: bold;
  position: relative;
  height: 40px;
  width: 100%;
}

nav ul {
  height: 40px;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

nav li {
  display: inline;
  float: left;
}

nav a {
  color: #DED6D6;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0px #30365E;
  width: 150px;
}

nav li a {
  border-right: 1px solid #515676;
  border-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav li:last-child a {
  border-right: 0;
}

nav a:hover, nav a:active {
  background-color: #2575C6;
}

nav a#pull {
  display: none;
}

@media screen and (max-width: 600px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: block;
    height: auto;
  }
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #C0C0C0;
    border-right: 1px solid #C0C0C0;
  }
  nav a {
    text-align: center;
    width: 100%;
    text-indent: 25px;
  }
}

@media only screen and (max-width: 480px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #17181D;
    width: 100%;
    position: relative;
    text-decoration: none;
  }
  nav a#pull:after {
    border-top: .5em double white;
    border-bottom: .145em solid white;
    content: ' ';
    display: inline-block;
    height: 0.85em;
    width: 1em;
    position: absolute;
    right: 15px;
    top: 13px;
  }
}

@media only screen and (max-width: 320px) {
  nav li {
    display: block;
    float: none;
    width: 100%;
  }
  nav li a {
    border-bottom: 1px solid white;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
		<div>
			<h1 class='vb'></h1>
			<div class='time'></div>
			<div id='clock'></div>
			<nav class='clearfix'>
				<ul class='clearfix'>
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="bio.html">Bio</a>
					</li>
					<li>
						<a href="#">Hobbies</a>
					</li>
					<li>
						<a href="resume.html">Resume</a>
					</li>
				</ul>
				<a href='#' id='pull'>Menu</a>
			</nav>
		</div>
	</header>
<div class='slider container'>
	<div class='slide active-slide slide-bg' id='slide1'>
		<div class='container'>
			<div class='row'>
					<div class='slide-copy-1 col-xs-12'>
						<h1>Surrounding</h1>
						<p class='fun'>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding.  When was the last time you stop and enjoy a nice beatiful sunset?</p>
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide2'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Get Moving And Motivated!</h1>
				<p>In a world where digital devices is so prominent, we get lost in them.  Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
				</div>
					<div class='slide-image col-md-8'>
						<!--
						<ul class='imageList'>
							<li><a href='#'><img src="images/jog.jpg" /></a></li>
							<li><a href='#'><img src="images/health.png" /></a></li>
							<li><a href='#'><img src="images/motivated.jpg" /></a></li>
							<li><a href='#'><img src='images/possible.jpg' /></a></li>
						</ul> -->
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide3'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Food Delight</h1>
				<p>We have all been there before!! Food is the best type of comfort.  Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
				<!--<img src="images/sushi.jpg"/>-->
				</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide4'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Videos</h1>
				<p>Movies, TV shows and online video play such a huge role in our culture.  Learning, Entertainment, Visual Satisfaction etc.</p>
				<!--<iframe class='vid' width="750" height="400" src="https://www.youtube.com/embed/sGbxmsDFVnE" frameborder="0" allowfullscreen></iframe> -->
				</div>
			</div>
		</div>
	</div>
</div>
	<div class='slider-nav'>
		<a href='#' class='arrow-prev'><img src="images/arrow-prev.png"></a>
			<ul class='slider-dot'>
				<li class='dot dot1 active-dot'>&bull;</li>
				<li class='dot dot2'>&bull;</li>
				<li class='dot dot3'>&bull;</li>
				<li class='dot dot4'>&bull;</li>
			</ul>
		<a href="#" class='arrow-next'><img src="images/arrow-next.png"></a>
	</div>

Answer 1

请看看它在这里工作[1]:https://jsfiddle.net/e1aar5hz/11/

$(function() {
        var pull = $('#pull');
        var menu = $('nav ul');
    menu.hide();
    pull.show()
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
    }
    }); 
});