为什么我的移动菜单项没有出现在点击？

时间：2020-04-01 16:08:53

标签： javascript jquery html css

我做了我的第一个自适应导航栏，一切都很好，但是当涉及到移动设备时，当我单击范围时，我无法查看导航栏元素，例如HOME，ABOUT等...

我使用了HTML，CSS，JavaScript

现在，问题出在CSS媒体查询中！

所以请帮助我解决这个问题！

这是我的密码...

HTML 

<!doctype html>
<html lang="en">

    <!-- HEAD OF HTML -->
  <head>

    <!-- Required Meta-tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="theme-color" content="#1C1C1C">
    <meta name="description" content="">
    <meta name="robots" content="index, follow">
    <!-- External CSS files -->
    <link rel="stylesheet" href="index_p.css">
    <!-- External JavaScript files 
    <script src="index_p.js"></script> -->
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
    <!-- JQuery
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    JQuery Ajax
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <!-- Title -->
    <title>Pytheo</title>
    <!-- Logo (Favicon) -->
    <link rel="icon" href="Logo.png" type="image/x-icon">

  </head>

  <body>

      <!-- HEADER -->
  <header>
      <!-- NAVBAR -->
    <div class="navbar">
            <div class="logo">
          <h3>Pytheo</h3>
        </div>
        <a class="span-btn">
          <span></span>
          <span></span>
          <span></span>
        </a>
            <div class="navBar">
                <a class="active" href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Author</a>
          <span>
            <a class="spec" href="#">Articles</a>
            </span>

            </div>
        </div>
  </header>

          <!-- JAVASCRIPT FILES -->

    <!-- JQuery -->
    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
    <!-- JQuery Ajax -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- External JavaScript files -->
    <script src="index_p.js"></script>

  </body>
</html>

CSS 

    /* IMPORTS */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Oleo+Script+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=IBM+Plex+Sans+Condensed:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&family=IBM+Plex+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&display=swap');
/* VARIABLES */
:root {
 /* COLORS */

/*Pure Mono*/
--light: #FFFFFF;
--black: #000000;

/*White*/
--primary: #FCFAFF;
--light-primary: #F7F5FA;
--dark-primary: #E4E1E7;

/*Secondary*/
--secondary: #F8FAF5;
--light-secondary: #F3F5F0;
--dark-secondary: #EEF0EB;

/*Grey*/
--light-grey: #D7D9D4;
--dark-grey: #C1BFC4;

/*Dark*/
--dark: #121212;
--light-dark: #505050;
--mid-dark: #323232;

/*Gradient*/
--grad-cyan: #00C6FF;
--grad-blue: #0072FF;

/*Accent*/
--ac-cyan: #00C6FF;
--ac-ltcyan: #52d8ff;
--ac-dkcyan: #007091;
--ac-blue: #0072FF;
--ac-ltblue: #308cff;
--ac-dkblue: #004191;
}

/*___________________________________________________________
               HTML Style Configuration                      
  __________________________________________________________*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    background: var(--primary);
    width: 100%;
    /*overflow-wrap: break-word;*/
}

/*___________________________________________________________
                   Navbar Styling                            
_____________________________________________________________*/

.navbar {
    position: relative;
    height: 70px;
    top: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--light-primary);
}

.logo {
    margin-left: 90px;
    font-size: 25px;
    /*font-family: 'Oleo Script Swash Caps', cursive;*/
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    color: var(--grad-blue);
    float: left;
    cursor: pointer;
}

.navBar {
    position: absolute;
    float: right;
    right: 80px;
}

.navbar .navBar .active {
    background: linear-gradient(to bottom right, #00C6FF, #0072FF);
    padding: 6px;
    color: var(--light);
    /*box-shadow: 0.5px 0.5px 1px var(--ac-cyan);*/
    box-shadow: 1px 1px 1px var(--ac-cyan);
}

.navbar .navBar .active:hover {
    background: linear-gradient(to bottom right, #00C6FF, #0072FF);
    padding: 6px;
    color: var(--light);
}

.navbar .navBar span {
    margin-left: 8px;
}

.navbar .navBar .spec {
    color: var(--light);
    /*background: linear-gradient(to bottom right, var(--ac-ltblue), var(--ac-ltcyan));*/
    background: var(--ac-blue);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    padding: 11px;
    margin-left: 16px;
    text-transform: uppercase;
    box-shadow: 1px 1px 2px var(--ac-cyan);
}

.navbar .navBar .spec:hover {
    background: linear-gradient(to bottom right, var(--ac-ltcyan), var(--ac-ltblue));
    transition: 0.6s;
}

.navbar .navBar .spec:active {
    background: linear-gradient(45deg, var(--ac-dkcyan), var(--ac-dkblue));
}

.navBar a {
    color: var(--ac-blue);
    margin-left: 20px;
    font-size: 0.9em;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px;
}

.navBar a:hover {
    background: linear-gradient(to bottom right, var(--grad-cyan), var(--grad-blue));
    transition: 0.1s linear;
    color: var(--light);
    box-shadow: 1px 1px 1px var(--ac-cyan);
}

.navBar a:active {
    background: linear-gradient(45deg, var(--ac-ltcyan), var(--ac-ltblue));
    /*transition: 0.1s linear;*/
}

.span-btn {
    display: none;
    position: absolute;
    right: 20px;
}

.span-btn:hover > span {
    background: var(--ac-ltcyan);
}

.span-btn span {
    display: block;
    margin: 7px;
    width: 40px;
    height: 3px;
    background: var(--ac-ltblue);
}

   @media only screen and (max-width: 840px) 

   {    .logo {
        margin-left: 20px;
        margin-right: 50px;
        font-size: 30px;
        font-family: 'Oleo Script Swash Caps', cursive;
        float: left;
        cursor: pointer;
    }

    .navbar {
        overflow: auto;
        height: 70px;
        top: 0;
        width: 100%;
        margin-left: 3px;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        background: var(--secondary);
        border-radius: 4px;
    }

    .navBar {
        width: 100%;
        right: 0;
        top: 80px;
        background: var(--secondary);
        overflow: hidden;
        max-height: 0;
    }

    .navBar a {
        display: block;
        text-align: center;
        padding: 12px;
        margin: 0;
    }

    .span-btn {
        display: block;
        cursor: pointer;
    }

    .show {
        max-height: 510px;
    }
   }

JavaScript 

$(".span-btn").on("click",  function() {
    $('.navbar').toggleClass("show");
});

4 个答案:

答案 0 :(得分：2)

您的JavaScript引用了HTML中不存在的$(".span-button")。

在JavaScript中将$(".span-button")重命名为$(".span-btn")。

答案 1 :(得分：1)

“未定义$”表示$是在使用var关键字声明它之前要尝试使用的变量或方法。

您应该在链接外部js文件之前链接jQuery，因为如果您执行相反的“在代码上完成了操作”，则会导致“未定义$”的问题，建议您在末尾添加js文件正文，因此您不会遇到该错误，但是如果您没有在正文末尾添加文件，则可以使用该代码：

尝试以下html代码：

<!doctype html>
<html lang="en">

  <head>

    <!-- Required Meta-tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="theme-color" content="#1C1C1C">
    <meta name="description" content="">
    <meta name="robots" content="index, follow">
    <!-- External CSS files -->
    <link rel="stylesheet" href="index_p.css">
   
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
  
    <!-- Title -->
    <title>Pytheo</title>
    <!-- Logo (Favicon) -->
    <link rel="icon" href="#" type="image/x-icon">

  </head>

  <body>

  <header>
    <div class="navbar">
            <div class="logo">
          <h3>Pytheo</h3>
        </div>
        <a class="span-btn">
          <span></span>
          <span></span>
          <span></span>
        </a>
            <div class="navBar">
                <a class="active" href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Author</a>
          <span>
            <a class="spec" href="#">Articles</a>
            </span>

            </div>
        </div>
  </header>
    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- JQuery Ajax -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <!-- External JavaScript files -->
    <script src="index_p.js"></script>
</body>
</html>

如果您在标头中导入了外部JS，则应使用此方法： 

$(document).ready(function(){
  $(".span-button").on("click", function() {
$('.navbar').toggleClass("show");
});
});

答案 2 :(得分：1)

您要在JQuery之前加载“ index_p.js”。必须先加载JQuery。

答案 3 :(得分：0)

对于CSS错误，请尝试以下代码：

$(".span-btn").on("click",  function() {
    $('.navBar').toggleClass("show");
});
 /* IMPORTS */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Oleo+Script+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=IBM+Plex+Sans+Condensed:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&family=IBM+Plex+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&display=swap');
/* VARIABLES */
:root {
 /* COLORS */

/*Pure Mono*/
--light: #FFFFFF;
--black: #000000;

/*White*/
--primary: #FCFAFF;
--light-primary: #F7F5FA;
--dark-primary: #E4E1E7;

/*Secondary*/
--secondary: #F8FAF5;
--light-secondary: #F3F5F0;
--dark-secondary: #EEF0EB;

/*Grey*/
--light-grey: #D7D9D4;
--dark-grey: #C1BFC4;

/*Dark*/
--dark: #121212;
--light-dark: #505050;
--mid-dark: #323232;

/*Gradient*/
--grad-cyan: #00C6FF;
--grad-blue: #0072FF;

/*Accent*/
--ac-cyan: #00C6FF;
--ac-ltcyan: #52d8ff;
--ac-dkcyan: #007091;
--ac-blue: #0072FF;
--ac-ltblue: #308cff;
--ac-dkblue: #004191;
}

/*___________________________________________________________
               HTML Style Configuration                      
  __________________________________________________________*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    background: var(--primary);
    width: 100%;
    /*overflow-wrap: break-word;*/
}

/*___________________________________________________________
                   Navbar Styling                            
_____________________________________________________________*/

.navbar {
    position: relative;
    height: 70px;
    top: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--light-primary);
}

.logo {
    margin-left: 90px;
    font-size: 25px;
    /*font-family: 'Oleo Script Swash Caps', cursive;*/
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    color: var(--grad-blue);
    float: left;
    cursor: pointer;
}

.navBar {
    position: absolute;
    float: right;
    right: 80px;
}

.navbar .navBar .active {
    background: linear-gradient(to bottom right, #00C6FF, #0072FF);
    padding: 6px;
    color: var(--light);
    /*box-shadow: 0.5px 0.5px 1px var(--ac-cyan);*/
    box-shadow: 1px 1px 1px var(--ac-cyan);
}

.navbar .navBar .active:hover {
    background: linear-gradient(to bottom right, #00C6FF, #0072FF);
    padding: 6px;
    color: var(--light);
}

.navbar .navBar span {
    margin-left: 8px;
}

.navbar .navBar .spec {
    color: var(--light);
    /*background: linear-gradient(to bottom right, var(--ac-ltblue), var(--ac-ltcyan));*/
    background: var(--ac-blue);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    padding: 11px;
    margin-left: 16px;
    text-transform: uppercase;
    box-shadow: 1px 1px 2px var(--ac-cyan);
}

.navbar .navBar .spec:hover {
    background: linear-gradient(to bottom right, var(--ac-ltcyan), var(--ac-ltblue));
    transition: 0.6s;
}

.navbar .navBar .spec:active {
    background: linear-gradient(45deg, var(--ac-dkcyan), var(--ac-dkblue));
}

.navBar a {
    color: var(--ac-blue);
    margin-left: 20px;
    font-size: 0.9em;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px;
}

.navBar a:hover {
    background: linear-gradient(to bottom right, var(--grad-cyan), var(--grad-blue));
    transition: 0.1s linear;
    color: var(--light);
    box-shadow: 1px 1px 1px var(--ac-cyan);
}

.navBar a:active {
    background: linear-gradient(45deg, var(--ac-ltcyan), var(--ac-ltblue));
    /*transition: 0.1s linear;*/
}

.span-btn {
    display: none;
    position: absolute;
    right: 20px;
}

.span-btn:hover > span {
    background: var(--ac-ltcyan);
}

.span-btn span {
    display: block;
    margin: 7px;
    width: 40px;
    height: 3px;
    background: var(--ac-ltblue);
}

   @media only screen and (max-width: 840px) 

   {    .logo {
        margin-left: 20px;
        margin-right: 50px;
        font-size: 30px;
        font-family: 'Oleo Script Swash Caps', cursive;
        float: left;
        cursor: pointer;
    }

    .navbar {
        overflow:visible;
        height: 70px;
        top: 0;
        width: 100%;
        margin-left: 3px;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        background: var(--secondary);
        border-radius: 4px;
    }

    .navBar {
       display:none;
        width: 100%;
        right: 0;
        top: 80px;
        background: var(--secondary);
/*         max-height: 0;
         */    }

    .navBar a {
        display: block;
        text-align: center;
        padding: 12px;
        margin: 0;
    }

    .span-btn {
        display: block;
        cursor: pointer;
    }

    .show {
        max-height: 510px;
        display:block;
    }
   }
<html lang="en">

  <head>

    <!-- Required Meta-tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="theme-color" content="#1C1C1C">
    <meta name="description" content="">
    <meta name="robots" content="index, follow">
    <!-- External CSS files -->
    <link rel="stylesheet" href="index_p.css">
   
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
  
    <!-- Title -->
    <title>Pytheo</title>
    <!-- Logo (Favicon) -->
    <link rel="icon" href="#" type="image/x-icon">

  </head>

  <body>

  <header>
    <div class="navbar">
            <div class="logo">
          <h3>Pytheo</h3>
        </div>
        <a class="span-btn">
          <span></span>
          <span></span>
          <span></span>
        </a>
            <div class="navBar">
                <a class="active" href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Author</a>
          <span>
            <a class="spec" href="#">Articles</a>
            </span>

            </div>
        </div>
  </header>
    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- JQuery Ajax -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <!-- External JavaScript files -->
    <script src="index_p.js"></script>
</body>
</html>

错误在这里： .navbar { overflow: auto; .navbar { position: fixed;。
您打开了两个具有相同名称的选择器，但没有将其关闭。

相关问题
最新问题