我的响应式导航栏无法正常工作

时间：2018-02-25 01:12:27

标签： javascript html css menu navigator

Okey所以当我试图制作下拉式响应导航栏时，它只是不起作用，所以如果有人可以帮助我，这将是很好的:)）

有关我的问题的更多信息。

当我按下此按钮时，菜单应该打开 picture of navbar

通常我改变的时候   标题导航ul高度为0它关闭它但当我将其更改为自动;它打开菜单，但它不会关闭它，所以我试图制作脚本，当你点击该图片时，它会将其转为自动;但我似乎没有工作。 所以我的问题是我无法打开它或关闭它。

fa-bars是来自awesomefont的图片，只是为了清楚说明。

这里有一些代码。

$(document).ready(function() {
  $(".fa-bars").on("click", function() {
    $("header nav ul").toggleClass("open");
  });
});
/* MOBILES */

@media screen and (max-width: 480px){
  #logo {
    width: 80px;
    margin-left: 30px;
    margin-top: 15px;
  }
  header nav {
    margin: 0;
    float: none;
  }
  .fa-bars {
    font-size: 24px;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    text-align: right;
    float: right;
    margin: 13px 35px 0 0;
  }
  .fa-bars:hover {
    opacity: 0.5;
  }
  header nav ul {
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  header nav ul.open {
    height: auto;
  }
  header nav ul li {
    width: 100%;
    padding: 5px 0;
    margin: 0;
    font-size: 17px;
    border-top: 1px solid #dddddd;
  }

  header nav ul li:hover {
    background-color: #eeeeee;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script defer src="js/fontawesome.js"></script>
    <title>SeQaFin</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">

  </head>

  <body>

    <!-- Header -->
    <header>
      <div id="logo">
        <a href="#">
          <img src="img/logo.png" alt="Logo">
        </a>
      </div>

      <!-- NavBar -->
      <nav id="main-nav">
        <i class="fas fa-bars"></i>
        <ul>
          <a href="#Kotisivu"><li>Etusivu</li></a></li>
          <a href="#Tietoa"><li>Tieto</li></a>
          <a href="#Liity"><li>Liity</li></a>
        </ul>
      </nav>
    </header>

    <!-- Etusivu -->
    <section id="Kotisivu">
      <h3 id="seqatext">DOwn</h3>
      <a href="#Tietoa">
        <img src="img/down.png" alt="Down">
      </a>
    </section>

    <!-- Tietoa -->
    <section id="Tietoa">
      <h3>Tietoa</h3>
      <hr>
      <img src="img/avatar.png" alt="Avatar">
      <h4></h4>
      <p>
      </p>

      <h4></h4>
      <p>
      </p>

      <h4></h4>
      <p>
      </p>

      <h4></h4>
      <p>
      </p>
      <br><br><br><br><br>
    </section>

    <!-- Liity -->
    <section id="Liity">
      <h3>Liity</h3>
      <hr>
      <h4>Ohjeet</h4>
      <p>Ohjeet Tähän!</p>

      <form>
        <input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
        <input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
        <textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
        <input class="button" type="submit">
      </form>
    </section>

    <footer>
      <p>
      </p>
    </footer>
        <script src="js/jquery.js"></script>
    <script src="js/mobile.js"></script>
  </body>
</html>

1 个答案:

答案 0 :(得分：0)

您尚未加载脚本文件。

尝试使用我在此处进行的修正。

$(document).ready(function() {
 $('.fa-bars').on('click', function() {
  $('header nav ul').toggleClass('open');
 });
});
@media screen and (max-width: 480px) {
  

#logo {
    width: 80px;
    margin-left: 30px;
    margin-top: 15px;
  }
}

header nav {
  margin: 0;
  float: none;
}

.fa-bars {
  font-size: 24px;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  text-align: right;
  float: right;
  margin: 13px 35px 0 0;
}

.fa-bars:hover {
  opacity: 0.5;
}

header nav ul {
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

header nav ul.open {
  height: auto;
}

header nav ul li {
  width: 100%;
  padding: 5px 0;
  margin: 0;
  font-size: 17px;
  border-top: 1px solid #dddddd;
}

header nav ul li:hover {
  background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script defer src="js/fontawesome.js"></script>
    <title>SeQaFin</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">

  </head>

  <body>

    <!-- Header -->
    <header>
      <div id="logo">
        <a href="#">
          <img src="img/logo.png" alt="Logo">
        </a>
      </div>

      <!-- NavBar -->
      <nav id="main-nav">
				<i class="fas fa-bars"></i>
        <ul>
          <a href="#Kotisivu"><li>Etusivu</li></a></li>
          <a href="#Tietoa"><li>Tieto</li></a>
          <a href="#Liity"><li>Liity</li></a>
        </ul>
      </nav>
    </header>

    <!-- Etusivu -->
    <section id="Kotisivu">
      <h3 id="seqatext">DOwn</h3>
      <a href="#Tietoa">
        <img src="img/down.png" alt="Down">
      </a>
    </section>

    <!-- Tietoa -->
    <section id="Tietoa">
      <h3>Tietoa</h3>
      <hr>
      <img src="img/avatar.png" alt="Avatar">
      <h4></h4>
      <p>
      </p>

      <h4></h4>
      <p>
      </p>

      <h4></h4>
      <p>
      </p>

      <h4></h4>
      <p>
      </p>
      <br><br><br><br><br>
    </section>

    <!-- Liity -->
    <section id="Liity">
      <h3>Liity</h3>
      <hr>
      <h4>Ohjeet</h4>
      <p>Ohjeet Tähän!</p>

      <form>
        <input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
        <input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
        <textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
        <input class="button" type="submit">
      </form>
    </section>

    <footer>
      <p>
      </p>
    </footer>
        <script src="js/jquery-3.3.1.min.js"></script>
				<script src="js/index.js"></script>
  </body>
</html>

相关问题
最新问题