Question

当我在导航链接之外单击或单击其中一个时，我一直试图使移动导航菜单切换回去。我环顾四周，我只找到我正在避免的jQuery示例。我想举一个JavaScript ES6的例子。那么，如何使它工作呢？

这是我的代码：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');


    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');
    })


}

navSlide();

html {
  scroll-behavior: smooth;
}

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

body {
  font-family: Gelion;
  background-color: #fa555204;
}

.nav-links li a, .logo {
  text-decoration: none;
 }
 
 ul {
  list-style: none;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  height: 10%;
  padding: 20px 0;
}

.nav-links {
  display: flex;
}

.nav-links li {
  padding: 0 15px;
}

.burger{
  display: none;
}

/* Media Query - Mobile */

@media only screen and (max-width: 700px) {
    body {
      overflow-x: hidden;
    }

    /* Burger Menu */

    .nav-links {
      position: fixed;
      right: 0;
      height: 100vh;
      width: 60%;
      top: 0vh;
      background-color: var(--secondary-color);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.5s ease-in;
      z-index: 1;
    }

    .nav-links li a {
      color: #fff;
    }

    .nav-active {
      transform: translateX(0%);
    }

    .main-nav .burger {
      display: block;
      cursor: pointer;
      font-size: 35px;
    }
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

<nav class="main-nav">
        <a href="#" class="logo" />Logo</a>
        <ul class="nav-links">
          <li><a href="#Overview">Overview</a></li>
          <li><a href="#Contagion">Contagion</a></li>
          <li><a href="#Symptoms">Symptoms</a></li>
          <li><a href="#Prevention">Prevention</a></li>
          <li><a href="#Contact">Contact</a></li>
        </ul>
        <div class="burger">
          <i class="fas fa-bars"></i>
        </div>
      </nav>

Answer 1

您可以很容易地使用CSS来使用：focus Selector 签出此链接：https://www.w3schools.com/cssref/sel_focus.asp

或尝试

using System.IO;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.Serialization.Formatters.Binary;
using UnityEngine;

public class LoadManager : MonoBehaviour
{
    public static LoadManager instance;
    public Data data;

    string dataFile = "737472696e67.dotouchit";

    public int Level { get; internal set; }

    void Awake()
    {
        if (instance == null)
        {
            DontDestroyOnLoad(this.gameObject);
            instance = this;
        }
        else if (instance != this)
        {
            Destroy(this.gameObject);
        }
    }

    private void Start()
    {
        Load();
    }

    private void Update()
    {
        Save();
    }
    public void Load()
    {
        string filePath = Application.persistentDataPath + "/" + dataFile;
        BinaryFormatter bf = new BinaryFormatter();
        if (File.Exists(filePath))
        {
            FileStream file = File.Open(filePath, FileMode.Open);
            Data loaded = (Data)bf.Deserialize(file);
            data = loaded;
            file.Close();


        }
        Debug.Log("Loaded Data");
    }
    public void Save()
    {
        string filePath = Application.persistentDataPath + "/" + dataFile;
        BinaryFormatter bf = new BinaryFormatter();
        FileStream file = File.Create(filePath);
        bf.Serialize(file, data);
        file.Close();

        Debug.Log("Saved Data");
    }

    [System.Serializable]
    public class Data
    {
        public int level = 0;


        public Data()
        {

            level = 0;
        }

    }


}

单击导航链接或在外部时切换导航菜单

1 个答案: