我有一个用 materialize 制作的网站。我正在使用一个 ul
和三个 li
元素,它们都是可折叠的。最上面是一张带有图像的卡片。我想在 li
元素处于事件状态时更改图像,分别展开。
这里已经有一些类似的问题,但没有一个真正适合我的问题。
以下是我的代码的示例布局。
<div class="card">
<div class="card-image">
<img src="img/image-1.jpg"/>
</div>
<ul class="collapsible expandable">
<li class="active">
<div class="collapsible-header">
<div class="collabsible-body">
</li>
</ul>
</div>
当您展开相应的 li
元素时,事件类出现。如果您关闭它,它会再次消失。
image-1.jpg
应该改变,当相应的 li
元素处于事件状态时对应于 li
元素。
非常感谢任何帮助!
最佳答案
如果您是在 active
之间切换类(class)的人和 collapsed
,您可以向您的切换功能添加额外的代码,它可以换出 src
该图像的。
如果没有,您可以使用 Mutation Observer当该 DOM 元素的类发生更改时触发回调。您仍然需要更新 src
以响应类更改。
// will watch target element for changes to the 'class'
// attribute and fire the callback with an array of the
// class names when changed
const observeClassList = (element, callback) => {
const config = { attributes: true }
const mutationCallback = mutationsList => {
mutationsList.forEach(mutation => {
if (mutation.attributeName === `class`)
callback([...mutation.target.classList])
})
}
const observer = new MutationObserver(mutationCallback)
observer.observe(element, config)
}
// example implementation
// it's up to you to watch for any class changes you desire on any element,
// and make changes to any other element (ie updating and image src) when desired
const changeImageOnToggle = (imageElement, toggleElement) => {
const callback = classArray => {
if (classArray.includes(`active-li`)) {
// update the image element src
}
}
observeClassList(toggleElement, callback)
}
关于javascript - 如何在列表类处于事件状态时更改特定图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57926432/