个人中心
gpt4 book ai didi

javascript - 为什么我的移动菜单项在点击时不显示？

转载 作者：行者123 更新时间：2023-12-01 07:03:24 25 4
gpt4 key购买 nike

我制作了第一个响应式导航栏，一切都很好，但是当涉及到移动设备时，当我单击跨度时，我无法查看导航栏元素，例如“主页”、“关于”等...

我使用了 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");
});

最佳答案

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

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

关于javascript - 为什么我的移动菜单项在点击时不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60975351/

25 4 0
文章推荐： javascript - 如何使这段代码更加动态和实用？
文章推荐： cloud - 为什么叫 "Cloud"？
文章推荐： javascript - 如何用多个id简化JS
文章推荐： silverlight - 在新选项卡中打开 Silverlight 窗口
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com