Question

伙计们，所以我试图制作一个具有垂直和水平居中内容的全屏导航栏，实现了我的目标并轻松创建了所有内容，但是有一个问题。我编写了所有代码，但是看来jquery代码无法正常工作，我使用chrome的开发人员工具进行了检查，并且没有在我希望添加到标签的类中添加任何类。这是我的代码

<div class="toggle"><a><i class="fa fa-bars" aria-hidden="true"></i></a></div>
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Students</a></li>
            <li><a href="#">Contact</a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Other
                </a>
                <div class="dropdown-menu dropdown-menu-down" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="comingsoon.html">States</a>
                    <a class="dropdown-item" href="memes/memes.html">Memes</a>
                </div>
                </li>
        </ul>
    </div>

        <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>

.toggle {
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 2;
}
.toggle a {
    text-decoration: none;
    color: #262626;
    font-size: 24px;
    cursor: pointer;

}
.menu {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1;
    transition: .5s;
}
.menu ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.menu ul li {
    list-style: none;
}
.menu ul li a {
    padding: 10px;
    display: inline-block;
    font-family:;
    font-size: 2em;
    text-decoration: none;
    text-transform: uppercase;
    color: #262626;
    text-align: center;
}
.menu.active {
    left: 0;
    overflow: auto;
}

<script type="text-javascript">
            $(document).ready(function() {
                $('.toggle a').click(function() {
                   $('.menu').toggleClass('active');
                })
            })
</script>

Answer 1

您的代码很好，您只需将“ text-javascript”替换为“ text / javascript”

Answer 2

比较和比较有趣

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>   
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- TEME -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                  </div>
                  <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#about">About</a></li>
                      <li><a href="#contact">Contact</a></li>
                    </ul>
                  </div><!--/.nav-collapse -->
                </div>
              </nav>

              <div class="container">

                <div class="starter-template">
                  <h1>Bootstrap starter template</h1>
                  <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
                </div>

              </div><!-- /.container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

导航栏切换器单击功能不起作用

2 个答案: