JS 移动导航不起作用

Question

我正在尝试编写新网站的代码，但遇到了 JS 文件没有响应导航文件的问题。

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

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

如果我遗漏了任何有用的信息，请告诉我。谢谢！！

我在下面包含了代码：

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

/*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;
  }
}

<!--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>

Answer 1

我在控制台中注意到访问您的网站时显示 未捕获的 SyntaxError：意外的令牌

这一行

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

.primaryMenu 实际上包裹在导航中，这可以简化为

$(".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>