javascript - 当在另一个页面上单击锚链接时,我试图在滚动到一个 ID 时打开我的手风琴
问题描述
我正在尝试滚动到不同页面上的 ID 并打开包含 ID 的手风琴。我尝试了几种不同的方法,但我似乎无法弄清楚。任何帮助是极大的赞赏。
我猜也许我可以在我当前的 Javascript 代码中实现一些可以实现这一点的东西?谢谢
锚标签 -
<a href="/pagename#test">This is a Test</a>
手风琴 -
<details>
<summary>
<div class="box box">
<div class="box-study box-study--content">
Accordion Name
</div>
<div class="box-study box-study--image">
<div class="studyicon">
<img src="/iconimage.png">
</div>
</div>
</div>
</summary>
<div class="inside themeGrey">
<h3 id="#test">Name of area I want to scroll too</h3>
</div>
</details>
手风琴的 Javascript
/** Class representing an accordion component. */
class Accordion {
/**
* Create an accordion component
*
* Accepts a container element which should contain a list of `details` and
* `summary` elements
*
* @param {String} selector The container element.
*/
constructor(selector) {
if (typeof selector !== "string") {
console.error("Accordion selector must be a string");
return;
}
this._container = document.querySelector(selector);
this._container.addEventListener('click', (event) => this._toggle(event));
}
/**
* Static method to close all `details` elements that are descendants of the
* passed in container element.
*
* @param {(HTMLElement|HTMLDocument)} [elem=document] The container
*/
static closeAll(elem = document) {
const opened = elem.querySelectorAll("details[open]");
for (const elem of opened) {
elem.removeAttribute("open");
}
}
/** Private methods */
/**
* Toggle the accordion elements
*
* @param {Event} event The triggering event object
*/
_toggle(event) {
event.preventDefault();
const details = event.target.closest("details");
if (details.hasAttribute("open")) {
details.removeAttribute("open");
} else {
Accordion.closeAll(this._container);
details.toggleAttribute("open");
}
}
}
解决方案
推荐阅读
- java - .intersect 在 android 工作室
- java - 我无法使用 setAttribute 和空格获取所有字符串
- geolocation - 如何获取两个邮政编码之间的距离
- mel - Maya Mel Script - 将枢轴放到对象底部?
- php - 具有本地数据库的 Intranet
- vuex - Vuex store vs component props:何时使用每种方法进行组件通信?
- c++ - 为什么继承的函数会更改基类中的成员变量而不是调用它的同名对象之一
- javascript - 带输入的 Dynamics 365 弹出窗口
- javascript - 重新加载 div onchange 事件后不再触发 Odoo Javascript
- angular - canActivate() 路由保护返回 true 但不是路由未加载