Question

我正在尝试对我的新网站进行编码，并且遇到JS文件无法响应导航文件的问题。

Head和Navigation文件都是我网站上的.php文件。测试网站可以在这里找到：http://testsite.laurenkapraun.com/

我仍然在努力使网站的其余部分响应，但我首先关注导航。

如果我遗漏任何有用的东西，请告诉我。谢谢！

我在下面提供了代码：

＆＃13;

$(document).ready(function() {
  $(".mobile .header .menu-toggle").click(function() {
    $(this).parent().next(".mobile .primaryMenu").toggle(0, "display");
  });
});

＆＃13;

/*Navigation*/

@media screen and (max-width: 738px) {
  .line {
    display: block !important;
    width: 30px;
    height: 2px;
    margin: 10px 10px;
    background-color: black;
    margin-top: 0px;
  }
  .menu-toggle:hover {
    cursor: pointer;
  }
  .primaryMenu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .mobile {
    display: block !important;
    background: #f7f6f1 !important;
    padding-top: 10px;
  }
  .mobile .primaryMenu {
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
  }
  .mobile .primaryMenu li a {
    color: #989AA4;
    display: block;
    padding: 15px 20px;
  }
  .mobile .primaryMenu li a:hover {
    background-color: #8a43a3;
    color: #fff;
  }
  .primaryMenu li {
    display: block;
  }
  .primaryMenu .wrap {
    padding: 0px;
  }
}

＆＃13;

<!--Head-->
<head>
	<meta charset="UTF-8">
	<title><?php if ($thisPage!="") echo " $thisPage"; ?> | Lauren Kapraun Portfolio</title>
	<meta name="title" content="<?php if ($thisPage!="") echo " $thisPage"; ?>" | Lauren Kapraun Portfolio />
	
	<!--CSS-->
	<link rel="stylesheet" href="includes/main.css" type="text/css" media="all">
	<link rel="stylesheet" href="includes/mobile.css" type="text/css" media="all">
	
	<!--JS-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript" src="includes/nav.js"></script>
	
	
	<!--External-->
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> 
</head>


<!--Navigation-->
<div class="mobile">
	<div class="header">
		<div class="menu-toggle">
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		</div>
	</div>

	<nav id="menu-top" role="navigation" aria-label="Top Menu" style="transition: max-height 350ms ease 0s; position: relative;" aria-hidden="false">
		<div class="primaryMenu">
			<div class="wrap">
				<ul id="menu-top-items">
					<li<?php if ($thisPage=="Home") echo " class=\"currentPage\""; ?>><a href="../index.php">Home</a></li>
					<li<?php if ($thisPage=="Technical") echo " class=\"currentPage\""; ?>><a href="../technical.php">Technical</a></li>
					<li<?php if ($thisPage=="Visual") echo " class=\"currentPage\""; ?>><a href="../visual.php">Visual</a></li>
					<li<?php if ($thisPage=="Video") echo " class=\"currentPage\""; ?>><a href="../video.php">Video</a></li>
					<li<?php if ($thisPage=="Sound") echo " class=\"currentPage\""; ?>><a href="../sound.php">Sound</a></li>
					<li<?php if ($thisPage=="Contact") echo " class=\"currentPage\""; ?>><a href="../contact.php">Contact</a></li>
				</ul>
			</div>
		</div>	
	</nav>
</div>

＆＃13;

Answer 1

Going to your site I noticed in the console it says Uncaught SyntaxError: Unexpected token < I also notice you have several links to different jQuery, using one will suffice. I also noticed the link to jquery-1.4.2.js seems weird, check that? The jQuery code itself for the menu looks fine.

this line here

$(this).parent().next(".mobile .primaryMenu").toggle(0, "display");

.primaryMenu is actualy wrapped in a nav and this could be simplified as

$(".primaryMenu").toggle(0, "display");

$(document).ready(function() {
  $(".mobile .header .menu-toggle").click(function() {
    $(".primaryMenu").toggle(0, "display");
  });
});

 .line {
    display: block !important;
    width: 30px;
    height: 2px;
    margin: 10px 10px;
    background-color: black;
    margin-top: 0px;
  }
  .menu-toggle:hover {
    cursor: pointer;
  }
  .primaryMenu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .mobile {
    display: block !important;
    background: #f7f6f1 !important;
    padding-top: 10px;
  }
  .mobile .primaryMenu {
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
  }
  .mobile .primaryMenu li a {
    color: #989AA4;
    display: block;
    padding: 15px 20px;
  }
  .mobile .primaryMenu li a:hover {
    background-color: #8a43a3;
    color: #fff;
  }
  .primaryMenu li {
    display: block;
  }
  .primaryMenu .wrap {
    padding: 0px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile">
	<div class="header">
		<div class="menu-toggle">
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		</div>
	</div>

	<nav id="menu-top" role="navigation" aria-label="Top Menu" style="transition: max-height 350ms ease 0s; position: relative;" aria-hidden="false">
		<div class="primaryMenu">
			<div class="wrap">
				<ul id="menu-top-items">
					<li<?php if ($thisPage=="Home") echo " class=\"currentPage\""; ?>><a href="../index.php">Home</a></li>
					<li<?php if ($thisPage=="Technical") echo " class=\"currentPage\""; ?>><a href="../technical.php">Technical</a></li>
					<li<?php if ($thisPage=="Visual") echo " class=\"currentPage\""; ?>><a href="../visual.php">Visual</a></li>
					<li<?php if ($thisPage=="Video") echo " class=\"currentPage\""; ?>><a href="../video.php">Video</a></li>
					<li<?php if ($thisPage=="Sound") echo " class=\"currentPage\""; ?>><a href="../sound.php">Sound</a></li>
					<li<?php if ($thisPage=="Contact") echo " class=\"currentPage\""; ?>><a href="../contact.php">Contact</a></li>
				</ul>
			</div>
		</div>	
	</nav>
</div>

JS移动导航无法正常工作

1 个答案: