javascript - 如何从外部链接打开手风琴
问题描述
我正在尝试滚动到关闭的手风琴内的不同页面上的 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");
}
}
}
解决方案
在页面加载时,您可以检查 URL 是否有哈希。然后查看元素是否存在。如果存在,请检查它是否在详细信息字段内,如果是,则打开手风琴并滚动到元素。
见_loadFromHash
实施细节。
/** 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', this._toggle, false);
this._loadFromHash();
}
/**
* 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");
}
}
_loadFromHash() {
// FOR DEMO SINCE THERE IS NO HASH IN STACK OVERFLOW SNIPPET, REMOVE LINE IN REAL APP
window.location.hash = '#test';
// Exit if no hash in url
if(!window.location.hash) return;
// Get element from hash, exit if not found
const element = document.querySelector('#test');
if(!element) return;
// Get parent details from element, exit if not found
const details = element.closest('details');
if(!details) return;
// Open accordion and scoll it into view
details.toggleAttribute("open");
element.scrollIntoView();
}
}
new Accordion('details');
<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 - 无法更正错误“失败 1 - 表格标记应有 3 行并检查表格和 tr 的 CSS 要求”
- python-3.x - QTableWidget 上的 PYQT5 setCellWidget() 会减慢 UI
- python - 角色动画发生得非常快
- node.js - writeFile 没有创建新文件
- python - 只需要从列表中选择至少存在一个值的行
- javascript - 尝试通过推送数组来创建数据库
- c++ - 有没有办法在 C++ 中定义一个类时“注册”一个类?
- javascript - 在 javascript 中搜索字符串时跳过或忽略部分字符串
- azure - 通过策略启用 Azure NSG FlowLogs
- c++ - 尝试完美的正方形你能给点小费吗