Javascript 我的导航条/标题有问题，它过去可以工作，但现在不行了'；T

我正在为我的学生合作社的一家公司创建这个网站，我为我的网站制作了这个标题，当我制作它时，它运行得非常好。现在，当我检查手机时，我按下下拉菜单中的“服务”按钮，但它不会下降，但当我尝试使用谷歌chrome开发响应工具时，我可以单击下拉菜单，但我也无法松开菜单。我知道我在CSS文件中写了很多代码，我确实有一些标记，比如页眉/主页

我的问题：

当我点击我的响应导航栏，当它的大小调整到一个较小的比例。我点击工具栏，我的导航菜单就会出现，但当我点击我的服务下拉菜单时，它不会出现，尽管它在google chrome响应开发工具上工作。但是，当我点击服务按钮，它的工作，下拉列表不会消失，当我再次点击它，我如何才能解决这个问题？在我的css文件中，导航栏的大部分都标记为“Header”。我决定把我的整个文件放进去，因为可能有什么东西写过头了，但我不知道是不是

HTML

JAVASCRIPT

const selectElement = (element) => document.querySelector(element);

selectElement('.menu-icons').addEventListener('click', () => {
    selectElement('nav').classList.toggle('active');
    });
        
var drop = document.querySelector(".dropdown");     
drop.addEventListener("click", function() {
var sub = document.querySelector("#drop-sub");  
    if(sub.classList.contains("sub-menu-vis")){
        document.getElementById("drop-sub").classList.remove("sub-menu-vis");
        }else{
        document.getElementById("drop-sub").classList.add("sub-menu-vis");
    }
});

以下是我所做的： 这是一个链接，因为代码段中有很多代码要放。

Javascript:

(function() {
        const selectElement = (element) => document.querySelector(element);

selectElement('.menu-icons').addEventListener('click', () => {
    selectElement('nav').classList.toggle('active');
    });
        
var drop = document.querySelector(".dropdown");     
drop.addEventListener("click", function() {
var sub = document.querySelector("#drop-sub");  
    if(sub.classList.contains("sub-menu-vis")){
        document.getElementById("drop-sub").classList.remove("sub-menu-vis");
        }else{
        document.getElementById("drop-sub").classList.add("sub-menu-vis");
    }
});

})();

只有javascript的空间。对html和css进行了编辑

你可以从那里得到代码

试试这个

更新： 我更新的CSS

/*-------------------------------------------- RESPONSIVENESS FOR HEADER ----------------------------------------------*/
@media screen and (max-width: 1200px) {
  .nav-list {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: none;
    align-items: initial;
    flex-direction: column;
    background-color: #1e90ff;
    z-index: 1000;
    overflow-y: scroll;
  }

  .nav-list li {
    line-height: 6rem;
  }

  .sub-menu {
    position: initial;
    border: 3px solid transparent;
    border-left-color: #00bfff;
    margin-left: 1rem;
    max-height: 0;
     display: none;
  }

  .sub-menu::before {
    display: none;
  }

    .nav-list li:hover > .sub-menu {
    visibility: hidden;
  }
    
    .sub-menu-vis {
    opacity: 1;
     display: block;
    visibility: visible !important;
    max-height: initial;
  }

  li.move-right {
    margin: 0 auto 0 0;
    line-height: initial;
  }

  .menu-icons {
    display: block;
  }

  .fas fa-times {
    display: none;
  }
    
  .dropdown{
     cursor: pointer; 
  }

  nav.active .fas fa-times {
    display: block;
  }

  nav.active .fas fa-bars {
    display: none;
  }

  nav.active .nav-list {
    display: flex;
  }
}
/*-------------------------------------------- RESPONSIVENESS FOR HEADER END ----------------------------------------------*/

constselectelement=（element）=>document.querySelector（element）；
selectElement（“.菜单图标”）。addEventListener（'单击'，（）=>{
selectElement（'nav'）。classList.toggle（'active'）；
});
var drop=document.querySelector（“.dropdown”）；
drop.addEventListener（“单击”，函数（）{
var sub=document.querySelector（“drop sub”）；
if（sub.classList.contains（“sub-menu vis”））{
document.getElementById（“drop sub”）.classList.remove（“sub-menu vis”）；
}否则{
document.getElementById（“drop sub”）.classList.add（“sub menu vis”）；
}
});
/*请勿触摸任何这些信息*/
*,
*：：之前，
*：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
溢出x：隐藏；
}
html{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：12px；
滚动行为：平滑；
}
a{
文字装饰：无；
}
保险商实验室{
列表样式：无；
}
/*不可触及信息的终结*/
/*--------------------------------------------标题样式----------------------------------------------*/
标题{
宽度：100%；
位置：粘性；
排名：0；
左：0；
z指数：999；
}
.集装箱{
宽度：100%；
最大宽度：117rem；
保证金：0自动；
填充：0.1.5雷姆；
}
.菜单图标{
颜色：#eee；
字号：4rem；
位置：绝对位置；
最高：50%；
右：2rem；
转化：translateY（-50%）；
光标：指针；
z指数：1500；
显示：无；
}
导航{
显示器：flex；
对齐项目：居中；
宽度：100%；
高度：8雷姆；
边框底部：1px实心rgba（225,225,225,0.1）；
}
.标志{
显示器：flex；
保证金权利：5 REM；
}
.导航列表{
显示器：flex；
宽度：100%；
对齐项目：居中；
}
.导航列表李{
线高：8rem；
位置：相对位置；
}
.子菜单li{
线高：4rem；
}
.导航列表a{
显示：块；
颜色：白色；
背景色：#1e90ff；
填充：0.1.5雷姆；
字体大小：1.4rem；
文本转换：大写；
过渡：颜色650ms；
过渡：背景色650ms；
}
.nav列表a：悬停{
颜色：黑色；
背景颜色：黄色；
}
.购物车{
高度：30px；
宽度：40px；
光标：指针；
右边距：15px；
边缘底部：5px；
}
.btn{
填充：1.3rem；
显示：内联块；
背景色：#1e90ff；
边框：2px实心#1e90ff；
边界半径：5雷姆；
过渡：背景色650ms；
}
.btn:悬停{
颜色：黑色；
背景颜色：黄色；
}
.子菜单{
宽度：20雷姆；
显示：块；
位置：绝对位置；
边框顶部：3px实心#00bff；
z指数：100；
顶部：16雷姆；
过渡：所有650ms缓解；
不透明度：0；
可见性：隐藏；
}
.子菜单：：之前{
内容：“；
位置：绝对位置；
顶部：-2.5雷姆；
左：3rem；
边框：1.2rem实心透明；
边框底色：#00bff；
}
.sub-menu.sub-menu:：before{
顶部：0.9雷姆；
左：-2.5雷姆；
边框：1.2rem实心透明；
右边框颜色：#00bff；
}
.子菜单.子菜单{
边界顶部：无；
左边框：3px实心#00bff；
排名：0；
左：160%；
}
.nav列表li：悬停>.sub菜单{
顶部：8rem；
不透明度：1；
能见度：可见；
}
.sub-menu li:悬停>.sub-menu{
排名：0；
左：100%；
}
李，向右移动{
保证金：自动0自动；
线高：初始；
过渡：颜色650ms；
过渡：背景色650ms；
}
/*--------------------------------------------收割台端部的样式----------------------------------------------*/
/*--------------------------------------------标题的响应性----------------------------------------------*/
@媒体屏幕和屏幕（最大宽度：1200px）{
.导航列表{
位置：固定；
排名：0；
左：0；
高度：100vh；
显示：无；
对齐项目：首字母；
弯曲方向：立柱；
背景色：#1e90ff；
z指数：1000；
溢出y：滚动；
}
.导航列表李{
线高：6rem；
}
.子菜单{
位置：初始；
边框：3倍纯色透明；
左边框颜色：#00bff；
左边距：1 em；
最大高度：0；
显示：无；
}
.子菜单：：之前{
显示：无；
}
.nav列表li：悬停>.sub菜单{
可见性：隐藏；
}
.子菜单vis{
不透明度：1；
显示：块；
可见性：可见！重要；
最大高度：初始高度；
}
李，向右移动{
边距：0自动0；
线高：初始；
}
.菜单图标{
显示：块；
}
.fas fa时报{
显示：无；
}
.下拉列表{
光标：指针；
}
nav.active.fas fa时间{
显示：块；
}
导航有效。快速固定杆{
显示：无；
}
导航。活动。导航列表{
显示器：flex；
}
}
/
(function() {
        const selectElement = (element) => document.querySelector(element);

selectElement('.menu-icons').addEventListener('click', () => {
    selectElement('nav').classList.toggle('active');
    });
        
var drop = document.querySelector(".dropdown");     
drop.addEventListener("click", function() {
var sub = document.querySelector("#drop-sub");  
    if(sub.classList.contains("sub-menu-vis")){
        document.getElementById("drop-sub").classList.remove("sub-menu-vis");
        }else{
        document.getElementById("drop-sub").classList.add("sub-menu-vis");
    }
});

})();

/*-------------------------------------------- RESPONSIVENESS FOR HEADER ----------------------------------------------*/
@media screen and (max-width: 1200px) {
  .nav-list {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: none;
    align-items: initial;
    flex-direction: column;
    background-color: #1e90ff;
    z-index: 1000;
    overflow-y: scroll;
  }

  .nav-list li {
    line-height: 6rem;
  }

  .sub-menu {
    position: initial;
    border: 3px solid transparent;
    border-left-color: #00bfff;
    margin-left: 1rem;
    max-height: 0;
     display: none;
  }

  .sub-menu::before {
    display: none;
  }

    .nav-list li:hover > .sub-menu {
    visibility: hidden;
  }
    
    .sub-menu-vis {
    opacity: 1;
     display: block;
    visibility: visible !important;
    max-height: initial;
  }

  li.move-right {
    margin: 0 auto 0 0;
    line-height: initial;
  }

  .menu-icons {
    display: block;
  }

  .fas fa-times {
    display: none;
  }
    
  .dropdown{
     cursor: pointer; 
  }

  nav.active .fas fa-times {
    display: block;
  }

  nav.active .fas fa-bars {
    display: none;
  }

  nav.active .nav-list {
    display: flex;
  }
}
/*-------------------------------------------- RESPONSIVENESS FOR HEADER END ----------------------------------------------*/