Javascript 子菜单没有'；无法在屏幕上正确渲染调整大小（以及意外行为）

我的垂直导航上有5个链接。在屏幕上调整我的垂直导航变为水平导航，显示三个链接（这5个链接中的三个），另一个链接称为

菜单

，显示其余两个链接

由于某些原因，在屏幕上调整大小时，当出现

菜单时，列表内容已显示，然后单击菜单时，即使您未将鼠标悬停在其上，它也会保留悬停属性。以下是视频：

1。在调整屏幕大小时，显示如下：


2.将鼠标悬停在菜单上时：


没关系。我只希望在单击菜单链接时显示链接，而不是将鼠标悬停在上面。但是我不明白为什么
菜单
会大声说出两个
li
空格

3.单击菜单时：


这没关系。但是，请注意菜单
li
现在的大小非常合适

4.单击
菜单
然后将鼠标移离链接后：

如前所述，我不知道是什么导致了这些问题

以下是我目前的做法：


$（文档）.ready（函数（）{
$（“.show”）。单击（函数（）{
$（“.subMenu”）.toggleClass（“活动”）；
返回false；
});
});
.site包装器{
身高：100%；
最小高度：100%；
显示器：flex；
}
/*使div在屏幕上显示在彼此下方调整大小*/
@媒体屏幕和屏幕（最大宽度：540像素）{
.网站包装{
弯曲方向：立柱；
}
}
ul子菜单{
显示：无；
}
.子菜单.active{
显示器：flex；
弯曲方向：立柱；
}
李秀{
显示：无；
}
.导航集装箱{
右边框：1px实心#e4e2；
身高：100%；
宽度：200px；
背景色：#F4F3；
}
.标志架{
文本对齐：居中；
}
.导航{
文本对齐：对齐；
}
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.导航链路{
显示：块；
文本对齐：左对齐；
颜色：#333；
文字装饰：无；
左边距：0px；
左侧填充：15px；
}
.导航链接：悬停{
背景色：#333；
颜色：#F4F3；
}
美国海军{
宽度：100%；
/*使div变为span div*/
填充：0px；
}
李国荣先生{
列表样式类型：无；
}
李海军：悬停在a上{
颜色：#F4F3；
}
.主动{
文本对齐：左对齐；
左侧填充：15px；
文字装饰：无；
背景色：#333；
颜色：#F4F3；
}
@媒体屏幕和屏幕（最大宽度：540像素）{
.导航集装箱{
宽度：100%；
高度：100px；
背景色：#F4F3；
边框底部：0.5px实心#f4f3；
}
.导航链路{
填充：10px；
}
.标志架{
溢出：隐藏；
显示：块；
保证金：自动；
宽度：40%；
}
.nav集装箱nav ul{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.标志架{
文本对齐：左对齐；
}
#导航组{
背景色：#F4F3；
边际上限：0；
}
.社交{
显示：无；
}
.隐藏{
显示：无；
}
.表演{
显示：内联块！重要；
}
nav ul li{}
}














说明：

你把很多事情都搞砸了。最重要的是要注意子元素是从主元素继承的。例如，如果我们有以下HTML：

<ul id="main_menu">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>
         <ul id="sub_menu">
             <li>sub list item 1</li>
         </ul>
    </li>
</ul>

因此，如果要在主菜单下仅应用于直接li，请使用
，这意味着仅应用直接元素，如下所示：

#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */
    color: red;
}

解决问题：

1-添加！子菜单的重要信息：

ul.subMenu {
    display: none !important;
}

2-注释或删除此行：

.nav li:hover a {
    /* color: #f4f3f3; */
}

3-您的子菜单从主菜单继承了一些不需要的样式。添加以下内容可以为您解决此问题：

.subMenu a.nav-link {
    background-color: #f4f3f3;
    color: #333;
}
.subMenu a.nav-link:hover {
    background-color: #333;
    color: #f4f3f3;
}
.subMenu.active {
    display: block !important;
}

这是一个例子

由于某些原因，在屏幕上调整大小时，当菜单出现时，列表内容已经显示出来

您可以使用jQuery的resize函数在调整大小时执行一些操作

但我不明白为什么菜单上说了两个李格

菜单占用了两个li空格，因为它包含一个ul，它有两个空格宽，这迫使它的宽度。
向锚定标记添加宽度将使其看起来更好一些，因为它不会从li继承宽度。
a、 导航链接{宽度：50px；}

单击菜单，然后将鼠标移离链接

使用jQuery将类添加到子菜单的父级，以便可以控制样式设置

这是代码，希望有帮助

jQuery

$(document).ready(function() {
    $(".subMenu").addClass('hide');
    $(".show").click(function() {
        $(".show").toggleClass('active-parent');
    $(".subMenu").toggleClass("active");
    $(".subMenu").toggleClass("hide");
    return false;
  });
});
$(window).resize(function(){
    $(".subMenu").addClass('hide');
});

html

二号

您将两个
ul
都设置为显示为flex，将其更改为仅应用于父
ul

  .nav-container nav>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

当用户单击菜单时，第二级链接的外观

.selected a,
.active a {
  background-color: #333;
  color: #f4f3f3;
}

我还添加了一些类，以便在菜单打开时简化样式设置

$(this).toggleClass('selected');


（函数（$）{
$（文档）.ready（函数（）{
$（“.show”）。单击（函数（）{
$（this.toggleClass（'selected'）；
$（“.subMenu”）.toggleClass（“活动”）；
返回false；
});
});
})（jQuery）
.site包装器{
身高：100%；
最小高度：100%；
显示器：flex；
}
/*使div在屏幕上显示在彼此下方调整大小*/
@媒体屏幕和屏幕（最大宽度：540像素）{
.网站包装{
弯曲方向：立柱；
}
}
ul子菜单{
显示：无；
}
.子菜单.active{
显示器：flex；
弯曲方向：立柱；
}
李秀{
显示：无；
}
.导航集装箱{
右边框：1px实心#e4e2；
身高：100%；
宽度：200px；
背景色：#F4F3；
}
.标志架{
文本对齐：居中；
}
.导航{
文本对齐：对齐；
}
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.导航链路{
显示：块；
文本对齐：左对齐；
颜色：#333；
文字装饰：无；
左边距：0px；
衬垫
  .nav-container nav>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

.selected a,
.active a {
  background-color: #333;
  color: #f4f3f3;
}

$(this).toggleClass('selected');