带有 jquery 和 php 的动态导航栏（带图像） - 鼠标悬停效果问题答案

【问题标题】：Dynamic Navigation bar (with images) with jquery and php - problems with mouseover effects带有 jquery 和 php 的动态导航栏（带图像） - 鼠标悬停效果问题
【发布时间】：2011-04-11 14:10:55
【问题描述】：

我正在构建一个由 PHP 控制的动态导航栏，并且我正在使用列表中的图像。我正在应用 jQuery 来实现“悬停”效果。这是PHP代码：

$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');

在我的导航列表中，我使用 PHP 'if' 语句根据 $page 的返回值设置 'display:none' 和 'display:inline'。见代码：

<ul id="cssdropdown">
  <li class="headlink">
  <a class="lightNav" href="index.php"  <?php if($page == 'index'){echo "style='display:none !important'";}else{echo "style='display:inline'";}?>><img src="images/navButtons/home.png" /></a>
  <a class="darkNav" href="index.php" <?php if($page == 'index'){echo "style='display:inline !important'";}else{echo "style='display:none'";}?>><img src="images/navButtons/home-dark.png" /></a>
  </li>....

这一切都很好，导航栏图像的显示会根据用户所在的页面而变化。但我的问题是现在我正在尝试集成 jQuery 以获得一个不错的“鼠标悬停/悬停”效果。见 jQuery 代码：

$("li.headlink").hover(function(){
  $(this).find("a.lightNav").css("display", "none");
  $(this).find("a.darkNav").css("display", "inline");
},function(){
  $(this).find("a.lightNav").css("display", "inline");
  $(this).find("a.darkNav").css("display", "none");
});

但这会引起问题。当用户将光标移到当前页面导航栏中的图像（即“暗”图像）上时，它会删除 PHP 设置的显示属性（显然）。

所以我需要一种方法来检查鼠标悬停是否“darkNav”显示“内联”或“无”并从那里定制我的 jQuery，但对于我的生活我不知道该怎么做，我不是世界上最伟大的 javascript/jQuery 编码器。有没有办法检查一个元素是否应用了特定的 CSS 属性，我用谷歌搜索并摆弄了几个小时的代码，但无济于事。

提前谢谢大家。

附：我在 PHP if 语句的导航栏中添加了 CSS !important，但出于某种奇怪的原因，这仅适用于 Chrome，所有其他浏览器都忽略了此规则。

【问题讨论】：

标签： php javascript jquery css navigation

【解决方案1】：

使用 jQuery，您可以像这样检查属性值：

...你的代码...

  alert($(this).find("a.lightNav").css("display"))

至于使用 jQuery 隐藏/显示元素，只需使用：

  $(this).find("a.lightNav").hide()
  $(this).find("a.darkNav").show()

无需摆弄“显示”，它已经内置在 hide()/show() 中。您也不需要使用它：

style='display:inline !important'"

默认情况下，显示已经是block 或inline，因此除非您使用“display:none”，否则您通常可以将它们去掉。

如果你有一个左浮动菜单，你应该使用float:left，而不是display:inline

此外，内联样式会覆盖样式表 CSS，因此您永远不需要使用 !important。

一个关于样式菜单的提示，样式是 A-tag，而不是 LI。将事件放在 A 标签上，而不是 LI。

如果您想了解如何正确设置菜单样式，请参阅我的教程： I love lists.

【讨论】：

【解决方案2】：

“所以我需要一种方法来检查鼠标悬停是否 'darkNav' 显示 'inline' 或 'none'..”

这是未经测试的，但您可以尝试类似...


   if ($(this).attr('style') == "display:none") {
     // do something
   }
   else if ($(this).attr('style') == "display:inline") {
     // do something
   }

但是，您可能想尝试 addClass() 和 removeClass() 而不是更改和/或使用内联 CSS。

【讨论】：

【解决方案3】：

是的..我认为使用 addClass()l 和 removeClass() 会更好地加载...一些类似的代码

if($(this).hasClass('visible') {
  // do something
}
else {
  // do something else
}

看起来更好、更专业、更易读……但我只是说……

【讨论】：