在多级菜单中遇到CSS问题

Question

我正在尝试构建一个多级侧面导航菜单，并且我能够完成它，但是即将出现一些CSS问题，请为我提供一种完成它的方法以及我可以做的任何代码增强功能

code link

我想创建一个如下所示的多菜单侧导航

1）但是问题在于子子项已经打开，应该关闭子子项，并且仅在单击父项时打开子项

2）发生这种情况是因为我的app.component.css中的CSS低于

.active  ul{
  display:block !important;
}

我对CSS不太了解，因此无法解决CSS问题。

Answer 1

CSS应该仅针对父元素具有 .active 类的子元素，

.active > app-submenu > ul {
  display: block !important;
}

我们需要修改 app.component 和 submenu.component （ HTML和TS ）

现在要通过单击父元素进行此项工作，我们需要一个变量，该变量将告诉我们选择了哪个 li ，我们可以使用元素的data属性来保存其状态，而不是创建新变量。

<li [attr.data-selected]="false"> /* content */ </li>

并访问它，我们为该元素提供一个 angular ID ，并将其作为论据传递给 NgClass >

<li #thisLiElement [attr.data-selected]="false" [ngClass]="setActiveClass(thisLiElement)"> /* content */ </li>

现在，单击数据属性需要更新。

<li *ngFor="let menu of navItems" (click)="clickedEvent($event); $event.stopPropagation();" #thisLiElement [attr.data-selected]="false" [ngClass]="setActiveClass(thisLiElement)">

clickedEvent 和 setActiveClass 的定义如下所示，它们会切换当前元素 < em>数据集

clickedEvent(event){
  if (event.currentTarget["dataset"].selected === "false")
    event.currentTarget["dataset"].selected = "true";
  else 
    event.currentTarget["dataset"].selected = "false";
}

setActiveClass(thisLiElement) {
  return thisLiElement.dataset.selected === "true" ? { "active": true } : { "active": false };
}

注意：对于上述更改，物料图标 如果条件 也应进行以下更新

<mat-icon *ngIf="menu.children && menu.children.length > 0">{{iconState(thisLiElement)}}</mat-icon> 

并且iconState的定义应该是

iconState(thisLiElement) {
  return thisLiElement.dataset.selected === "true" ? "expand_less" : "expand_more";
}

此外，子菜单组件中无需 @output ，因此我删除了 emitter ，函数 subMenuClicked

通过here更新了StackBlitz。

希望有帮助。

Answer 2

您必须这样的JavaScript代码

$(function(){
    $(".dropdown-submenu").on("click",function(e){
    var current=$(this).find(".dropdown-menu").first();
    console.log(current);
        current.toggle();
        e.stopPropagation();
    });


 $(document).click(function(){
   $(".dropdown-menu").hide('slow'); 
});


});

更多阅读： 1）Clickable Multilevel menu 2）https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h