Question

我正在使用Animate Plus为手风琴制作动画。我有多个定义列表（dl），我想将它们全部定位，而不仅仅是第一个。

以下是相关代码段：

const accordion = {
  element: document.querySelector("dl"),
  translate: 0
}

const buttons = Array.from(
  accordion.element.getElementsByTagName("button"),
  element => ({
    element,
    translate: 0
  })
)

我试图转换为数组并使用扩展运算符[…document.querySelectorAll("dl")]，但没有成功。

如何在特定情况下使用querySelectorAll定位所有dl标签？

我的手风琴的例子可以在这里找到： https://codepen.io/anon/pen/QYwQqV

Answer 1

以下是更新的 CodePen ：使用@Configuration @EnableCaching public class CacheConfiguration { private static final String HAZELCAST_LOGGING_TYPE = "hazelcast.logging.type"; @Bean public Config hazelCastConfig() { return new Config().setInstanceName("cache") .addMapConfig( new MapConfig().setName(ServiceConstant.SPECIALITY) .setMaxSizeConfig(new MaxSizeConfig(200, MaxSizeConfig.MaxSizePolicy.FREE_HEAP_SIZE)) .setEvictionPolicy(EvictionPolicy.LRU).setTimeToLiveSeconds(100)) .setProperty(HAZELCAST_LOGGING_TYPE, "none"); } }定位文档中的每个Array.from(document.querySelectorAll('dl'))：

https://codepen.io/jo_va/pen/OdVpbJ

由于现在有多个手风琴，所以我首先构建了一个手风琴数组，并修改了几乎所有功能，以手风琴和一系列按钮作为第一个参数。

最后，您只需要遍历手风琴并执行与您相同的逻辑，但是要为当前手风琴及其按钮进行参数化。

dl

希望我能正确理解您的问题，对您有帮助。

干杯。

Answer 2

如何？

// collect all dl elements
const accordion = {
  definitionLists: Array.from(document.querySelectorAll("dl")),
  translate: 0
}

// get all button elements inside of each dl in a single array
const buttons = accordion.definitionLists.reduce((acc, dl) => {
  let currentDlButtons = Array.from(dl.getElementsByTagName("button"), 
   element => ({
     element,
     translate: 0
    }));
  return acc.concat(currentDlButtons);
}, []);

如何在特定上下文中使用querySelectorAll

2 个答案: