jQuery导航菜单问题

Posted 2023-04-13

【中文标题】jQuery导航菜单问题

【英文标题】：jQuery navigation menu issue

【发布时间】：2012-01-07 00:43:23

【问题描述】：

我有一个演示 up here，因此您可以查看所有涉及的 html 和 javascript。

问题：

我遇到的问题是，目前，当您将鼠标悬停在链接上（除了主页）然后将鼠标移动到屏幕上的任何其他位置（除了主页链接）时，主页链接不会恢复为白色文本颜色。

我尝试通过更改以下代码来解决问题（查看从页面链接到的“example.js”文件以查看完整代码）：

if (status == "off")

$(this).stop().animate( color: linkcol ,500);

我加了一行

if (status == "off")

$(this).stop().animate( color: linkcol ,500);
$(".current_page_item_two a").stop().animate( color: whitecol ,500);

此行旨在将 current_page_item_two 元素内的链接设置回白色，当没有链接悬停时（当滑块返回主链接时）。

但是，查看演示 here，您可以看到这会在导航中产生一些可怕的故障（在链接上摆动鼠标以了解我的意思，我最终导致了一些问题，即白色翻转动画根本不工作）

另外，作为旁注，为什么在动画完成之前调用悬停矩形动画时的回调函数？我是 jquery 新手，我的印象是第四个参数是动画完成时要调用的函数。

谢谢！

【问题讨论】：

附带说明一下，*** 支持 Markdown，它可以在不需要丑陋的 HTML 标记和字符代码的情况下格式化文本。我重新格式化了你的问题。

谢谢！下次我会记住的。

【参考方案1】：

您的代码过于复杂。我将您想要做的事情重构为一个非常简单的 jQuery 插件。如果您愿意，我鼓励您研究 css3 动画以使其更小（尽管您可能希望保持跨浏览器兼容性）。代码仍然比它需要的复杂一点，尽管这更多是因为我目前没有太多时间。您可以在此处查看解决方案：

http://jsfiddle.net/hGm7M/3/

编辑：更新 url 以将重置滑块添加到主页并更改滑块宽度

如果您有任何问题，请随时提出。

注意事项：

您可以将所有 css 移动到 jQuery 插件中，使其成为一个独立的小部件 您可以将滑块与颜色系统分开，但在这种情况下我不确定是否值得 现在，为了简单起见，我没有在 css 中设置颜色，这意味着没有 javascript 的浏览器只会获得默认的彩色链接。有很多解决方案，但这取决于你想做什么。我倾向于喜欢事物的小部件样式，因此我会为客户端提供一个 html 菜单，然后将其

替换

为具有所有自己样式等的 js 小部件。这样您就可以优雅地降级，但代码仍然简单且严格。

【讨论】：

等等，我刚刚意识到我没有让它默认返回主页链接。立即修复。

谢谢卡尔！你非常有用，除了帮助我解决我的问题之外，我还在这个过程中学到了一些东西。

很高兴我能提供帮助！干杯