$ is used before defined bootstrap Jquery

时间：2017-08-04 12:27:59

标签： javascript

I was just following the tutorial at linda.com and faced problem I have index bootstrap.js and are being used in different folder I think this is file location problem....or not.

I attached a photo of my project structure

my folder structure is like below

and my index code is like this 

<!doctype>
<html>
	<head>
		<title>Happy Card---Home</title>
		<meta charset="utf-8">
		<meta http-equiv="X-US-Compatible" content="Chrome">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" href="css/mystyle.css">
		<link rel="stylesheet" href="js/myscript.js">
		<link rel="stylesheet" href="css/bootstrap.css" media="screen">
   		
    	
	    <link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
	    
	    
	</head>
	
	<body id="Home">
		<section class="container">	
		  <?php include "_/component/php/header.php"?>
			<div class="content row">
				<section class="main col col-lg-8">
					
				</section><!---main--->
				<section class="sidebar col col-lg-4">
					
				</section><!---sidebar--->
			</div><!---content--->
		</section><!---container--->
		
       
		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/myscript.js"></script>
		
	</body>

$(function(){
	
    $('ul.nav il.dropdown').hover(function(){
   $('.dropdown-menu',this).fadeIn();		
    }, function(){
    $('.dropdown-menu',this).fadeout('fast');
   });
   });
<!doctype>
<html>
	<head>
		<title>Happy Card---Home</title>
		<meta charset="utf-8">
		<meta http-equiv="X-US-Compatible" content="Chrome">
		<meta name="viewport" content="width=device-width, initial-
    scale=1.0">
		
		<link rel="stylesheet" href="css/mystyle.css">
		<link rel="stylesheet" href="js/myscript.js">
		<link rel="stylesheet" href="css/bootstrap.css" media="screen">
   		

	    
	    
	</head>
	
	<body id="Home">
		<section class="container">	
		  <?php include "_/component/php/header.php"?>
			<div class="content row">
				<section class="main col col-lg-8">
					
				</section><!---main--->
				<section class="sidebar col col-lg-4">
					
				</section><!---sidebar--->
			</div><!---content--->
		</section><!---container--->
		
       
		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/myscript.js"></script>
		
	</body>
	<footer>
				

	</footer>
</html>

And header is like this 

<div class="content row">
	<div class="col-lg-12">
		<header class="clearfix">
			<section id="branding">
				<a href="index.php"></a>
			</section><!---branding-->	
				
			<nav class="navbar navbar-inverse">
 			 <div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile 
display -->
					<div class="navbar-header">
					  <button type="button" class="navbar-toggle collapsed" 
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					  </button>
					  <a class="navbar-brand" href="#">Batam Tour &amp; 
Living Info</a>
					</div>

					<!-- Collect the nav links, forms, and other content for 
toggling -->
					<div class="collapse navbar-collapse" id="bs-example-
navbar-collapse-1">
					  <ul class="nav navbar-nav">
						<li><a href="#">Home <span class="sr-only">(current)
   </span></a></li>
						<li><a href="#">About us</a></li>
					
					  	<li class="dropdown">
						  <a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Batam Tour <span class="caret"></span></a>
						  <ul class="dropdown-menu">
							<li><a href="#">ATTRACTION</a></li>
							<li><a href="#">SHOPPING MALL</a></li>
							<li><a href="#">THINGS TO DO</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">RENT CAR</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">HAPPY CARD</a></li>
						  </ul>
						</li>
						
						<li class="dropdown">
						  <a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Living Info <span class="caret"></span></a>
						  <ul class="dropdown-menu">
							<li><a href="#">REAL ESTATE</a></li>
							<li><a href="#">BUSINESS ENVIRONMENT</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">BUSINESS CONSULTING</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">LIVING Q&amp;A</a></li>
						  </ul>
						</li>
																	
					  </ul>
					  <form class="navbar-form navbar-right">
						<div class="form-group">
						  <input type="text" class="form-control" 
placeholder="Search">
						</div>
						<button type="submit" class="btn btn-
default">Submit</button>
					  </form>
					  <ul class="nav navbar-nav navbar-right">
						<li><a href="#">Contact Us</a></li>
						
					  </ul>
					</div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
				
		</header><!---header-->
	</div><!---column-->
</div><!---content-->

1 个答案:

答案 0 :(得分：0)

You have two typos

il instead of li and fadeout instead of fadeOut and you unnecessary load myscript.js as a <link rel="stylesheet" - you can remove that line

If I add the JS and CSS and insert your header it works:

$(function() {
  $('ul.nav li.dropdown').hover(function() {
    $('.dropdown-menu', this).fadeIn();
  }, function() {
    $('.dropdown-menu', this).fadeOut('fast');
  });
});


$(function() {
  $('ul.nav li.dropdown').hover(function() {
    $('.dropdown-menu', this).fadeIn();
  }, function() {
    $('.dropdown-menu', this).fadeOut('fast');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<section class="container">

  <div class="content row">
    <div class="col-lg-12">
      <header class="clearfix">
        <section id="branding">
          <a href="index.php"></a>
        </section>
        <!---branding-->

        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile 
display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					  </button>
              <a class="navbar-brand" href="#">Batam Tour &amp; 
Living Info</a>
            </div>

            <!-- Collect the nav links, forms, and other content for 
toggling -->
            <div class="collapse navbar-collapse" id="bs-example-
navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a href="#">Home <span class="sr-only">(current)
   </span></a></li>
                <li><a href="#">About us</a></li>

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data- toggle="dropdown" role="button" aria-haspopup="true" aria- expanded="false">Batam Tour <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">ATTRACTION</a></li>
                    <li><a href="#">SHOPPING MALL</a></li>
                    <li><a href="#">THINGS TO DO</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">RENT CAR</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">HAPPY CARD</a></li>
                  </ul>
                </li>

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data- toggle="dropdown" role="button" aria-haspopup="true" aria- expanded="false">Living Info <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">REAL ESTATE</a></li>
                    <li><a href="#">BUSINESS ENVIRONMENT</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">BUSINESS CONSULTING</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">LIVING Q&amp;A</a></li>
                  </ul>
                </li>

              </ul>
              <form class="navbar-form navbar-right">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-
default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contact Us</a></li>

              </ul>
            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
        </nav>

      </header>
      <!---header-->
    </div>
    <!---column-->
  </div>
  <!---content-->

  <div class="content row">
    <section class="main col col-lg-8">

    </section>
    <!---main--->
    <section class="sidebar col col-lg-4">

    </section>
    <!---sidebar--->
  </div>
  <!---content--->
</section>
<!---container--->

相关问题
最新问题