Jquery UI 菜单栏在 Cupertino 主题中显示白色文本

Posted 2023-02-16

【中文标题】Jquery UI 菜单栏在 Cupertino 主题中显示白色文本

【英文标题】：JqueryUI menubar shows white text in cupertino theme

【发布时间】：2013-11-09 13:46:05

【问题描述】：

我开始使用 Jquery UI。我特别喜欢 Cupertino 主题，我需要构建一个水平菜单。

我面临的第一个问题是菜单栏似乎不是 JqueryUI 的一部分（已删除或正在开发中？）所以我不得不将它添加到 jquery-ui.js 之上。

 <link rel="stylesheet" href="jquery-ui-1.10.3.custom\css\cupertino\jquery-ui-1.10.3.custom.min.css" />
  <link rel="stylesheet" href="css\jquery.ui.menubar.css" />

  <script src="jquery-ui-1.10.3.custom\js\jquery-1.9.1.js"></script>
  <script src="jquery-ui-1.10.3.custom\js\jquery-ui-1.10.3.custom.min.js"></script>
  <script src="\js\jquery.ui.menubar.js"></script>

似乎它与 JqueryUI 的其余部分不是 100% 兼容，因为子菜单在非常浅的背景上有白色文本。

问题：我是否需要手动修改li 元素的样式（除了我没有成功），还是在使用 JqueryUI+menubar 时出现概念上的错误？ Live example

【参考方案1】：

在 jquery.ui.menubar.js 中更改以下代码。无需进行任何 CSS 更改。

// line 386, from
.closest(this.options.items).removeClass("ui-state-active");
// to
.closest(this.options.items).removeClass("ui-widget-header");

// line 408, from
menuItem.addClass( "ui-state-active" );
// to
menuItem.addClass("ui-widget-header");
this.menuItems.children().addClass("ui-widget-header");

我用以下主题对此进行了测试：

库比蒂诺 轻弹 青蛙 流畅度 开始 晴天 时髦的钱包

它适用于所有人。我使用 IE10（并在兼容模式下）和 Chrome 30.0.1599.101 对其进行了测试。

【参考方案2】：

我找到了解决方案。白色来自jquery-ui-1.10.3.custom.css（cupertino 主题）的以下行 862 到 867

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited 
    color: #ffffff;
    text-decoration: none;

现在，在menu() 中，.ui-state-active 被分配给顶部菜单的li 内的a 元素，而在menubar() 中，活动状态被分配给直接 li 元素导致 every a 元素具有白色文本。 （在 Cupertino 中，这使文本可读！！）

所以，为了解决这个问题，我们可以更改jquery.ui.menubar.js 中添加和删除上述类的两行：

// line 408, from
menuItem.addClass( "ui-state-active" );
// to
menuItem.children(":first").addClass( "ui-state-active" );

// line 386, from
.closest( this.options.items ).removeClass( "ui-state-active" );
// to
.closest( this.options.items ).children(":first").removeClass( "ui-state-active" );

我尝试在 google drive 中更新加载 js 的小提琴，但 jsfiddle 没有加载它。