导航链接不起作用

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>