如何解决物化CSS嵌套Scrollspy无法正常工作:如何实现?
请求的行为:
我正在创建一个带有两个侧面菜单的Angular应用。右侧菜单是主菜单。左侧菜单是一个子菜单,显示主要章节的子章。
由于内容显示在一页/每条路线上,因此我想使用两个Materialize Scrollspys(或者,如果可能的话,在两个菜单中使用一个Scrollspy)来指示用户在页面上的位置。因此,滚动条应在左侧突出显示当前主要章节,在右侧突出显示当前子章节。
当前状态
我试图通过嵌套两个Materialize scrollspys来实现此行为。 Scrollspy已正确初始化,并突出显示了两个菜单。
问题
但是,嵌套的scrollspy无法正常工作。它仅突出显示外部Scrollspy,因此仅突出显示外部菜单。下图显示了主菜单(左侧栏)上缺少的突出显示。
我创建了一个stackblitz应用程序来重现该问题:StackBlitzApp
您可以在我的GitHub存储库中找到更详细的问题说明和完整代码:GitHub Issue & Code
我的Component.ts:
import { Component,OnInit,ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import M from 'materialize-css';
import { Observable,of,Subject } from 'rxjs';
import { delay,filter } from 'rxjs/operators';
@Component({
selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
elem: HTMLElement;
instance: any;
elem2: HTMLElement;
instance2: any;
constructor(private elementRef: ElementRef) { }
ngOnInit() {
this.elem = this.elementRef.nativeElement.querySelectorAll('.scrollspy');
this.instance = M.ScrollSpy.init(this.elem);
this.elem2 = this.elementRef.nativeElement.querySelectorAll('.scrollspy2');
this.instance2 = M.ScrollSpy.init(this.elem2);
}
}
我的Component.hmtl:
<ul class="section table-of-contents left">
<li><a href="#section1">section1</a></li>
<li><a href="#section2">section2 (Main Menu)</a></li>
<li><a href="#section3">section3</a></li>
</ul>
<ul class="section table-of-contents right">
<li><a href="#section21">section21 (Submenu)</a></li>
<li><a href="#section22">section22 (Submenu)</a></li>
<li><a href="#section23">section23 (Submenu)</a></li>
</ul>
<div id="section1" class="scrollspy outer-container">
<h1>Section 1</h1>
</div>
<!--Main chapter -->
<div id="section2" class=" outer-container">
<!--
Add scrollspy as class to section 2
if scrollspy added in outer-container,inner menu not working
if scrollspy not added,outer menu is not working correctly since not highlighting chapter 2
if scrollspy2 is used for inner menus,similiar issues exist
-->
<h1>Section 2 (Main Menu)</h1>
<div id="section21" class="scrollspy inner-container">
<h2>Section 21 (Submenu)</h2>
</div>
<div id="section22" class="scrollspy inner-container">
<h2>Section 22 (Submenu)</h2>
</div>
<div id="section23" class="scrollspy inner-container">
<h2>Section 23 (Submenu)</h2>
</div>
</div>
<!-- Subchapters-->
<div id="section3" class="scrollspy outer-container">
<h1>Section 3</h1>
</div>
我该如何解决?有没有一种方法可以在MaterializeCSS中使用嵌套的“ Scrollspy”?还是有更好的解决方案?您能提供一个代码示例吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。