javascript - JS不会将导航显示属性从none改为flex-6ren

javascript - JS不会将导航显示属性从none改为flex

转载作者：太空宇宙更新时间：2023-11-04 06:24:23

27

4

JS 不会将 nav-hidden 显示属性从 none 更改为 flex。我尝试了 !important，这在某些情况下似乎有效，但我想知道为什么这不起作用，以便我能更好地理解这一点。当我按下按钮时，会为该元素分配一个新类，但属性保持为无。

我想做的是:当屏幕小于 700px 时，只有当我点击整个屏幕上的按钮时才会出现 nav-hidden，当屏幕大于 700px 时，nav-line 与里面的标志一致.

function myFunction() {
    var fullnavigation = document.getElementById("nav-hidden");
    fullnavigation.classList.toggle("open-nav");
}

body{
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
header{
    background-color: #009933;
    width:100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.logo img{
    display: block;
    height: 4em;
}
@media screen and (max-width:700px){
    .nav-line{
        display: none;
    }
    .open-nav{
        display: flex;    
    }
    .nav-hidden{
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #009933;
        flex-direction: column;
    }
    .nav-button{
        display: block;
        color: #ffffff;
        background-color: transparent;
        padding: 0px;
        border: 0px;
        cursor: pointer;
        font-size: 4em;
        z-index: 9999;
    }
}

<!DOCTYPE html>
<html lang="sl">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="slike\favicon\favicon.png" type="image/gif" size="128x128">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script src="js\index.js"></script>
  <link rel="stylesheet" href="css\index.css">
</head>
<body>
    <header>
        <div class="logo"><img src="" alt="logo"></div>
        <button id="nav-button" onclick="myFunction()">☰</button>
        <nav id="nav-line" class="nav-line">
                <div class="nav-text"><a href="#">DOMOV</a></div>
                <div class="nav-text"><a href="#">O NAS</a></div>
                <div class="nav-text"><a href="#">KONTAKT</a></div>
                <div class="nav-text"><a href="#">POVPRAŠEVANJE</a></div>
        </nav>
    </header>
    <nav id="nav-hidden" class="nav-hidden">
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">O NAS</a></div>
        <div class="nav-text"><a href="#">KONTAKT</a></div>
        <div class="nav-text"><a href="#">POVPRAŠEVANJE</a></div>
    </nav>
</body>
</html>

最佳答案

当 CSS 依次读取您的代码时，.open-nav 类已被下一个 .nav-hidden 拦截。问题不在您的 JS 代码中，如果您查看此 JSFiddle它有效并且 js 可以很好地切换你的类(class)。只需将 .open-nav 放在 .nav-hidden

之后

@media screen and (max-width:700px){
    .nav-line{
        display: none;
    }
    .nav-hidden{
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #009933;
        flex-direction: column;
    }

    .open-nav{
        display: flex;    
    }
}

关于javascript - JS不会将导航显示属性从none改为flex，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55207229/

27

4

0

文章推荐： python 粘贴不显示错误跟踪

文章推荐： jquery - easyzoom jquery 的两个实例相互控制

c++ - 改 rebase 数排序基数？
我试图理解基数排序，但在理解实现实际代码时改 rebase 数时遇到问题。这是我用来学习基数排序的代码，我会尝试解释我不明白的地方。此代码由 GeeksForGeeks 提供: // C++ imp
PHP连接MySQL进行增、删、改、查操作
话不多说，请看代码： ? 1
mysql语句实现简单的增、删、改、查操作示例
本文实例讲述了mysql语句实现简单的增、删、改、查操作。分享给大家供大家参考，具体如下： 1、创建db_shop数据库，如果该数据库不存在则创建 ?
oracle监控某表变动触发器例子(监控增,删,改)
使用oracle触发器实现对某个表的增改删的监控操作,并记录到另一个表中。代码：复制代码代码如下: create or replace trigger test_trigge
java连接数据库增、删、改、查工具类
java连接数据库增、删、改、查工具类数据库操作工具类，因为各厂家数据库的分页条件不同，目前支持Mysql、Oracle、Postgresql的分页查询在Postgresql环境测试过了，其他
使用DataTable更新数据库(增,删,改)
1、修改数据复制代码代码如下: DataRow dr =
.NET使用P/Invoke来实现注册表的增、删、改、查功能
注册表可以用来进行存储一些程序的信息，例如用户的权限、或者某些值等，可以根据个人需要进行存储和删减。当前注册表主目录：引用包 Wesky.Net.OpenTools 1.0.5或
java - 改 Flying Saucer 头
是否可以将 pdf 页面的页眉更改为与当前所选书签同名的名称？我正在为我的 pdf 生成使用 Flying Saucer 。你能举个例子吗？提前致谢。最佳答案这对我适用于 flyingsaucer
我的第一个项目(十二):分数和生命值的更新(后端增删查改的"改")
好家伙,写后端,这多是一件美逝. 关于这个项目的代码前面的博客有写我的第一个独立项目 - 随笔分类 - 养肥胖虎 - 博客园 (cnblogs.com
Numpy array数据的增、删、改、查实例
准备工作：增、删、改、查的方法有很多很多种，这里只展示出常用的几种。 ?
Android--SQLite（增，删，改，查）操作实例代码
需要5个类： 1.实体类：Person.java 2.抽象类:SQLOperate.java(封装了对数据库的操作) 3.助手类：DBOpenHelper.java(继承SQLiteOpenH
浅析C++中单链表的增、删、改、减
首先是是一个简单的例子，单链表的建立和输出。程序1.1 复制代码代码如下: #include<iostream> #include<string> using na
简单的php数据库操作类代码(增,删,改,查)
数据库操纵基本流程为：　　1、连接数据库服务器　　2、选择数据库　　3、执行SQL语句　　4、处理结果集　　5、打印操作信息　　其中用到的相关函数有 •resource m
ios - 改 rebase 于 uilabel 的自适应布局的颜色
我需要为 iPad 和 iPhone 设置不同颜色的标签，我知道我们可以为不同的尺寸类别更改字体大小，但是有什么方法可以根据尺寸类别的值设置不同的颜色我知道有可用的代码解决方案，但我想知道 size
opencv - 3D 相机坐标到世界坐标(改 rebase 础？)
假设我有一个物体相对于相机的坐标 X、Y、Z 和方向 Rx、Ry、Rz。此外，我有这个相机在世界上的坐标 U、V、W 和方向 Ru、Rv、Rw。如何将对象的位置(位置和旋转)转换为其在世界中的位置？
Struts2实现CRUD(增删改查)功能实例代码
CRUD是Create（创建）、Read（读取）、Update（更新）和Delete（删除）的缩写，它是普通应用程序的缩影。如果您掌握了某框架的CRUD编写，那么意味可以使用该框架创建普通应用程序了
php开发留言板的CRUD(增，删，改，查)操作
项目结构：添加页面： &
Android操作SQLite数据库(增、删、改、查、分页等)及ListView显示数据的方法详解
本文实例讲述了android操作sqlite数据库(增、删、改、查、分页等)及listview显示数据的方法。分享给大家供大家参考，具体如下：由于刚接触android开发，故此想把学到的基础知识
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
总括 pandas的索引函数主要有三种： loc 标签索引，行和列的名称 iloc 整型索引（绝对位置索引），绝对意义上的几行几列，起始索引为0 ix 是 iloc 和 loc的合体 at

首页

博学

6Ren·AI

商城

javascript - JS不会将导航显示属性从none改为flex