javascript - 导航链接不起作用

Question

我的导航链接只会切换导航菜单本身。我让它在元素的开始和大部分时间都在工作，但是在构建一个更有活力的页脚的某个地方它刚刚停止工作并且似乎无法找到问题所在。我认为这可能与它的索引有关，或者可能是一个过低的问题

$(document).ready(function() {

  $('#nav-mobile ul').hide();
  $('#socialbtns').removeClass("socialbtns");
  $('#ig').removeClass("fa fa-md fa-instagram");
  $('#twitter').removeClass("fa fa-md fa-twitter");
  $('#linkin').removeClass("fa fa-md fa-linkedin");
  $('#trademark').removeClass("footer3");
  $('#nav-mobile').click(function(e) {
      e.preventDefault();
      $('#nav-mobile ul').slideToggle();
  });
  resize();
  $(window).resize(function() {
    resize();
    if(window.matchMedia("(max-width: 999px)").matches){
      $(' <span> Instagram </span>').appendTo("#ig");
      $$(' <span> Twitter </span>').appendTo("#twitter");
      $('<span> LinkedIn </span>').appendTo("#linkin");
      $('#trademark').addClass("footer3");
    }
    });
});


function resize(){
  if (window.matchMedia("(min-width: 1000px)").matches) {
    $('#nav-mobile').hide();
    $('#socialbtns').addClass("socialbtns");
    $('#ig').addClass("fa fa-md fa-instagram");
    $('#twitter').addClass("fa fa-md fa-twitter");
    $('#linkin').addClass("fa fa-md fa-linkedin");
    $('span').remove();
    $('#trademark').removeClass("footer3");
  }
  else {
    $('#nav-mobile').show();
    $('#socialbtns').removeClass("socialbtns");
    $('#ig').removeClass("fa fa-md fa-instagram");
    $('#twitter').removeClass("fa fa-md fa-twitter");
    $('#linkin').removeClass("fa fa-md fa-linkedin");
    $('#trademark').addClass("footer3");
  }

};

/* Base Element Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  background-color: #F2F2F2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  z-index: 1;
}

img {
  height: 250px;
  max-width: 90%;
  padding-top: 30px;
  display: block;
  margin: 0 auto;
  background-size: contain;
}

p {
  font-size: 1em;
  text-align: left;
  padding: 15px;
}

a, a:hover, a:link {
  color: inherit;
  text-decoration: none;
  opacity: .8;
}

li a {
  color: #FFF;
  text-align: center;
  text-decoration: none;
}



/* Containers */
.container {
  margin: 0 auto;
  width: 90%;
  text-align: center;

}

.img-container {
  margin: 0 auto;
  width: 90%;
}

.border {
  padding: 5px 0;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
}

.wrapper {
  background-color: 	#121212;
  padding-bottom: 50px;
}


/* Base Layout Styles */

.main-header {
  background-image: url("../images/main.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 280px;
  width: 100%;
  margin: 50px  auto;
  padding-top: 20px;
  text-align: center;
}

.name {
  font-size: 1.4em;
  letter-spacing: 8px;
  color: #FFF;
  border-bottom: solid;
  border-color: #000;
  border-width: 2px;
  display: inline-block;
}

.services {
  font-size: 0.8em;
  font-weight: 200;
  color: #FFF;
}

#nav-mobile {
  display: block;
  padding: 10px;
  font-size: 1em;
  text-decoration: none;
  text-align: center;
  top:0;
}
#nav-mobile,
 #nav-mobile ul,
 #nav-mobile li {
  position: relative;
}
#nav-mobile ul {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
#nav-mobile ul li {
  width: 100%;
  display: block;
  padding: 8px 0;
  margin: 0;
  color: #FFF;
  text-align: center;
}

#nav-mobile a  {
  text-decoration: none;
  color: #FFF;
  outline: none;
}

.titles {
  font-size: 1.1em;
  font-weight: 700;
  padding-top: 30px;
  text-align: center;
}

.title-button {
  background-color: #121212;
  border: none;
  color: #FFF;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1em;
  cursor: pointer;
  display: inline;
}

.main-footer {
	background-color: #121212;
  color: #FFF;
  font-size: .9em;
	padding-top: 5px;
	margin-top: 30px;
  text-align: center;
}

.main-footer ul li {
  list-style: none;
  text-decoration: none;
  width: 90%;
}

.footer3{
  padding-top: 15px;
}

/* Social Media Icons */

.socialbtns li {
  list-style: none outside none;
  display: inline;
  padding-left: 10px;
}

.socialbtns .fa {
	width: 40px;
  height: 28px;
	color: #FFF;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-border-radius: 20px;
	transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}

.socialbtns .fa:hover {
	transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2);
	transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}




/* Media Queries */
@media only screen and ( min-width: 670px){

  img {
    max-width: 80%;
    height: auto;
  }

  p {
    font-size: 1.4em;
  }

  .main-header {
    height: 40vh;
  }

  .name {
    font-size: 2.2em;
  }

  .services {
    font-size: 1.2em;
  }

  #nav-mobile {
    font-size: 1.4em;
  }

}

@media screen and (min-width: 630px) and (orientation: landscape) {

  .main-header {
    max-height: 60%;
    height: 100vh;
  }

}

@media only screen and ( min-width: 1000px){

  .container {
    padding: 15px;
  }

  .wrapper {
    height: 90%;
    padding: 0;

  }

  .img-container{
    min-width: 100%;
    padding: 0;
    position: relative;
  }


  .main-header {
    margin: 0 auto;
    width: 100%;
  }

  .name {
    border-width: 4px;
  }

  .name,
  .services {
    font-size: 3.5em;
  }

  .title {
    padding-top: 20px;
  }


.section1 {
  width: 40%;
  float: left;
}

.section2 {
  width: 40%;
  float: right;
}

.main-footer {
  font-size: 1.2em;
}

.main-footer ul {
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
  white-space: no-wrap;
}

.main-footer ul li {
  width: 100%;
}

.footer1,
.footer2 {
  width: 45%;
  padding-top: 10px;
  overflow: hidden;
  white-space: no-wrap;
}

.footer1 {
  float: left;
  display: block;
}

.footer2,
.footer3 {
  text-align: center;
  padding-left: 10px;
  display: inline-block;
}

.footer2 li:nth-child(1) {
  padding: 0;
}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/main.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
  </head>

  <body>
    <!-- Menu Icon -->
    <div class="wrapper">
      <nav id="nav-mobile">
          <a >Menu</a>
          <ul>
              <li><a href="bio.html">About</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="photos.html">Photography</a></li>
          </ul>
      </nav>

    <!-- Home Page -->
      <div class="img-container border">
        <header class ="main-header">
          <div class="title">
            <div class="name"> Luis Rodriguez </div>
            <div class="services"> Web Developer & Photographer </div>
          </div>
        </header>
      </div>
    </div>


    <!-- Content Section -->
    <div class="container">
      <div class="section1">
        <img src="images/pg1.jpg" alt="Photography">
        <div class="titles"> Photography </div>
          <p> In this era a photo does much more than merely remind us of a moment. It has by far become one of the most diverse forms of influence. We capture pictures of loved ones and bring tears of joy years later, while on the other hand busiensses rely on a picture to convey a "million words" to potential clients. Regardless of your story, the right photo should amaze you every time you see it.
          </p>
        <div  class="title-button">
          <a href="photos.html"> My Photos </a>
        </div>
      </div>

      <div class="section2">
        <img src="images/img1.jpg" alt="Code">
        <div class="titles"> WebDev </div>
          <p> When you ask someone to browse something online you really never know what they'll use anymore. You can have one person pull out their phone, another use a tablet, you've got someone on a desktop, and there may even be someone using their TV. Having a dynamic website is vital to ensuring that who ever is visiting your site can have a clean simple view to your page regardless of where they see it.
           </p>
        <div class="title-button">
          <a href="code.html">My Code</a>
        </div>
      </div>
    </div>


    <footer class="main-footer">
      <ul>
        <div class="footer1">
          <li><a href="bio.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </div>
        <div class="footer2">
          <div class="socialbtns" id="socialbtns">
            <li><a target="_blank" href="https://www.twitter.com/baesicmedia"  id="twitter" class="fa fa-md fa-twitter"><span id="twitter-text">Twitter</span></a></li>
            <li><a target="_blank" href="#"  id="linkin" class="fa fa-md fa-linkedin"><span> LinkedIn</span></a></li>
            <li><a target="_blank" href="https://www.instagram.com/baesicfrs/"  id="ig" class="fa fa-md fa-instagram"><span> Instagram</span></a></li>
          </div>
          <div id="trademark" class="footer3">
            <li>&copy;2017 Baesic Media</li>
          </div>
        </div>
      </ul>
    </footer>

  </body>

  <script type="text/javascript" src="javascript/jquery-3.2.0.min.js"></script>
  <script type="text/javascript" src="javascript/main.js"></script>
</html>

Answer 1

这段代码会帮助你，你的函数不会在 #nav-mobile ul > li >a 被点击时运行。

$('#nav-mobile').click(function(e) {
   if(!$(e.target).is('#nav-mobile ul > li >a')){
      e.preventDefault();
      $('#nav-mobile ul').slideToggle();
   }
});

$(document).ready(function() {

  $('#nav-mobile ul').hide();
  $('#socialbtns').removeClass("socialbtns");
  $('#ig').removeClass("fa fa-md fa-instagram");
  $('#twitter').removeClass("fa fa-md fa-twitter");
  $('#linkin').removeClass("fa fa-md fa-linkedin");
  $('#trademark').removeClass("footer3");
  $('#nav-mobile').click(function(e) {
      if(!$(e.target).is('#nav-mobile ul > li >a')){
        e.preventDefault();
        $('#nav-mobile ul').slideToggle();
      }
  });
  resize();
  $(window).resize(function() {
    resize();
    if(window.matchMedia("(max-width: 999px)").matches){
      $(' <span> Instagram </span>').appendTo("#ig");
      $(' <span> Twitter </span>').appendTo("#twitter");
      $('<span> LinkedIn </span>').appendTo("#linkin");
      $('#trademark').addClass("footer3");
    }
    });
});


function resize(){
  if (window.matchMedia("(min-width: 1000px)").matches) {
    $('#nav-mobile').hide();
    $('#socialbtns').addClass("socialbtns");
    $('#ig').addClass("fa fa-md fa-instagram");
    $('#twitter').addClass("fa fa-md fa-twitter");
    $('#linkin').addClass("fa fa-md fa-linkedin");
    $('span').remove();
    $('#trademark').removeClass("footer3");
  }
  else {
    $('#nav-mobile').show();
    $('#socialbtns').removeClass("socialbtns");
    $('#ig').removeClass("fa fa-md fa-instagram");
    $('#twitter').removeClass("fa fa-md fa-twitter");
    $('#linkin').removeClass("fa fa-md fa-linkedin");
    $('#trademark').addClass("footer3");
  }

};

/* Base Element Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  background-color: #F2F2F2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  z-index: 1;
}

img {
  height: 250px;
  max-width: 90%;
  padding-top: 30px;
  display: block;
  margin: 0 auto;
  background-size: contain;
}

p {
  font-size: 1em;
  text-align: left;
  padding: 15px;
}

a, a:hover, a:link {
  color: inherit;
  text-decoration: none;
  opacity: .8;
}

li a {
  color: #FFF;
  text-align: center;
  text-decoration: none;
}



/* Containers */
.container {
  margin: 0 auto;
  width: 90%;
  text-align: center;

}

.img-container {
  margin: 0 auto;
  width: 90%;
}

.border {
  padding: 5px 0;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
}

.wrapper {
  background-color: 	#121212;
  padding-bottom: 50px;
}


/* Base Layout Styles */

.main-header {
  background-image: url("../images/main.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 280px;
  width: 100%;
  margin: 50px  auto;
  padding-top: 20px;
  text-align: center;
}

.name {
  font-size: 1.4em;
  letter-spacing: 8px;
  color: #FFF;
  border-bottom: solid;
  border-color: #000;
  border-width: 2px;
  display: inline-block;
}

.services {
  font-size: 0.8em;
  font-weight: 200;
  color: #FFF;
}

#nav-mobile {
  display: block;
  padding: 10px;
  font-size: 1em;
  text-decoration: none;
  text-align: center;
  top:0;
}
#nav-mobile,
 #nav-mobile ul,
 #nav-mobile li {
  position: relative;
}
#nav-mobile ul {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
#nav-mobile ul li {
  width: 100%;
  display: block;
  padding: 8px 0;
  margin: 0;
  color: #FFF;
  text-align: center;
}

#nav-mobile a  {
  text-decoration: none;
  color: #FFF;
  outline: none;
}

.titles {
  font-size: 1.1em;
  font-weight: 700;
  padding-top: 30px;
  text-align: center;
}

.title-button {
  background-color: #121212;
  border: none;
  color: #FFF;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1em;
  cursor: pointer;
  display: inline;
}

.main-footer {
	background-color: #121212;
  color: #FFF;
  font-size: .9em;
	padding-top: 5px;
	margin-top: 30px;
  text-align: center;
}

.main-footer ul li {
  list-style: none;
  text-decoration: none;
  width: 90%;
}

.footer3{
  padding-top: 15px;
}

/* Social Media Icons */

.socialbtns li {
  list-style: none outside none;
  display: inline;
  padding-left: 10px;
}

.socialbtns .fa {
	width: 40px;
  height: 28px;
	color: #FFF;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-border-radius: 20px;
	transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}

.socialbtns .fa:hover {
	transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2);
	transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}




/* Media Queries */
@media only screen and ( min-width: 670px){

  img {
    max-width: 80%;
    height: auto;
  }

  p {
    font-size: 1.4em;
  }

  .main-header {
    height: 40vh;
  }

  .name {
    font-size: 2.2em;
  }

  .services {
    font-size: 1.2em;
  }

  #nav-mobile {
    font-size: 1.4em;
  }

}

@media screen and (min-width: 630px) and (orientation: landscape) {

  .main-header {
    max-height: 60%;
    height: 100vh;
  }

}

@media only screen and ( min-width: 1000px){

  .container {
    padding: 15px;
  }

  .wrapper {
    height: 90%;
    padding: 0;

  }

  .img-container{
    min-width: 100%;
    padding: 0;
    position: relative;
  }


  .main-header {
    margin: 0 auto;
    width: 100%;
  }

  .name {
    border-width: 4px;
  }

  .name,
  .services {
    font-size: 3.5em;
  }

  .title {
    padding-top: 20px;
  }


.section1 {
  width: 40%;
  float: left;
}

.section2 {
  width: 40%;
  float: right;
}

.main-footer {
  font-size: 1.2em;
}

.main-footer ul {
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
  white-space: no-wrap;
}

.main-footer ul li {
  width: 100%;
}

.footer1,
.footer2 {
  width: 45%;
  padding-top: 10px;
  overflow: hidden;
  white-space: no-wrap;
}

.footer1 {
  float: left;
  display: block;
}

.footer2,
.footer3 {
  text-align: center;
  padding-left: 10px;
  display: inline-block;
}

.footer2 li:nth-child(1) {
  padding: 0;
}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/main.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
  </head>

  <body>
    <!-- Menu Icon -->
    <div class="wrapper">
      <nav id="nav-mobile">
          <a >Menu</a>
          <ul>
              <li><a href="bio.html">About</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="photos.html">Photography</a></li>
          </ul>
      </nav>

    <!-- Home Page -->
      <div class="img-container border">
        <header class ="main-header">
          <div class="title">
            <div class="name"> Luis Rodriguez </div>
            <div class="services"> Web Developer & Photographer </div>
          </div>
        </header>
      </div>
    </div>


    <!-- Content Section -->
    <div class="container">
      <div class="section1">
        <img src="images/pg1.jpg" alt="Photography">
        <div class="titles"> Photography </div>
          <p> In this era a photo does much more than merely remind us of a moment. It has by far become one of the most diverse forms of influence. We capture pictures of loved ones and bring tears of joy years later, while on the other hand busiensses rely on a picture to convey a "million words" to potential clients. Regardless of your story, the right photo should amaze you every time you see it.
          </p>
        <div  class="title-button">
          <a href="photos.html"> My Photos </a>
        </div>
      </div>

      <div class="section2">
        <img src="images/img1.jpg" alt="Code">
        <div class="titles"> WebDev </div>
          <p> When you ask someone to browse something online you really never know what they'll use anymore. You can have one person pull out their phone, another use a tablet, you've got someone on a desktop, and there may even be someone using their TV. Having a dynamic website is vital to ensuring that who ever is visiting your site can have a clean simple view to your page regardless of where they see it.
           </p>
        <div class="title-button">
          <a href="code.html">My Code</a>
        </div>
      </div>
    </div>


    <footer class="main-footer">
      <ul>
        <div class="footer1">
          <li><a href="bio.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </div>
        <div class="footer2">
          <div class="socialbtns" id="socialbtns">
            <li><a target="_blank" href="https://www.twitter.com/baesicmedia"  id="twitter" class="fa fa-md fa-twitter"><span id="twitter-text">Twitter</span></a></li>
            <li><a target="_blank" href="#"  id="linkin" class="fa fa-md fa-linkedin"><span> LinkedIn</span></a></li>
            <li><a target="_blank" href="https://www.instagram.com/baesicfrs/"  id="ig" class="fa fa-md fa-instagram"><span> Instagram</span></a></li>
          </div>
          <div id="trademark" class="footer3">
            <li>&copy;2017 Baesic Media</li>
          </div>
        </div>
      </ul>
    </footer>

  </body>

  <script type="text/javascript" src="javascript/jquery-3.2.0.min.js"></script>
  <script type="text/javascript" src="javascript/main.js"></script>
</html>