jquery 插件或脚本自动循环手风琴

发布于 2024-07-13 22:14:32 字数 437 浏览 7 评论 0原文

请有人就此向我提供建议。 我目前正在使用 bassistance.de 的手风琴插件,当您成功运行时将鼠标悬停在每个项目标题上以显示每个子内容。 我为此使用无序列表(4 个列表项,每个列表项有 2 个子项)

这很好,但现在要求它:

  1. 每 5 秒自动循环(展开/折叠)每个列表项,但
  2. 要暂停当您将鼠标悬停在子内容(而不是通常激活该列表项的手风琴功能的父项)上时,
  3. 仍然保留鼠标悬停功能,即。 展开/折叠每个列表项的子内容。

我希望所有这些都是有意义的,如果有任何不清楚的地方,请告诉我,我将非常乐意澄清!

感谢你!

Please could someone advise me regarding this. I am currently using the accordion plugin from bassistance.de working successfully when you hover over each item header to reveal each child content. I am using an unordered list for this (4 list items, each with 2 child items)

This is fine, but the requirements now call for it to:

  1. automatically cycle (expand/collapse) each list item every 5 seconds, but
  2. to be paused when u hover over the child content (not the parent item that usually activates the accordion functionality for that list item)
  3. still retain mouseover functionality, ie. expand/collapse child contents for each list item.

I hope all of this makes sense, and if anything is unclear, please let me know and i'll be more than happy to clarify it!

thank u!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

时光礼记 2024-07-20 22:14:33

为此,创建一个执行两件事的函数:

  1. 在循环中的下一个元素上调用 click()
  2. 调用 setTimeout,将方法本身作为第一个参数,将所需的延迟作为第二个参数(基本上,函数是使用递归调用的) 。

要让它在鼠标悬停时停止循环,请在 if(running) 中调用 click() 并创建 start 和 stop 方法来控制 running 变量 将它们绑定到相关元素上的鼠标悬停。

请参阅此示例获取灵感(查找“最后...”标题)。

To do this create a function that does two things:

  1. Call click() on the next element in cycle
  2. Call setTimeout with the the method itself as the first parameter, and the desired delay as the second parameter (basically function is being called recursively with a delay)

To have it stop cycling on mouseover, sorround the click() call in a if(running) and create start and stop methods to control the running variable. Bind these to mouseover on the relevant elements.

See this example for inspiration (look for the "And finally..." headline).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文