0

问候！我对您对使用现代方法（jQuery？）处理网站菜单系统的最佳实践的反馈感兴趣。

旧方式（目前到位）：

<div id="menu">
  <ul>
    <li class="navHotel"><a href="#" onmouseover="MM_showHideLayers('hotel','','show','tour','','hide','location','','hide','attractions','','hide','dining','','hide')">hotel</a></li>
    <li class="navTour"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','show','location','','hide','attractions','','hide','dining','','hide')">take a tour</a></li>        
    <li class="navLocation"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','hide','location','','show','attractions','','hide','dining','','hide')">location</a></li>
    <li class="navAttractions"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','hide','location','','hide','attractions','','show','dining','','hide')">attractions</a></li>
    <li class="navDining"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','hide','location','','hide','attractions','','hide','dining','','show')">dining</a></li>
  </ul>

正如您所看到的，每个导航链接显示和隐藏基于鼠标悬停的各种 DIV（子菜单）。站点中的每个页面都必须具有不同的初始子菜单/DIV 状态，因此我有额外的 onmouseover 触发器连接到各种 DIV，因此如果访问者将鼠标移动到页面的其他部分，原始菜单状态会“快速”返回：

<div id="leftColumn1" onmouseover="MM_showHideLayers('hotel','','hide','location','','hide','attractions','','hide','dining','','hide')">

我知道我的方法会受到打击，并且还有其他更好的方法/技术来处理这个问题。

总而言之，我正在寻找：

1）菜单系统代码的集中管理（我现在正在使用 INCLUDE，我希望它是正确的） 2）处理鼠标悬停和子菜单显示的更好方法。3) 当鼠标移离菜单区域时，处理“快速”返回效果的更好方法。

提前感谢您的反馈！祝你有美好的一天！

4

1 回答 1

0

您应该尝试使用 jQuery 并为每个菜单项赋予一个类，而不是用大量的 onclick 污染标记。

使用 jQuery，您可以简单地使用每个菜单项的类或 id，并在 jQuery 函数中编写鼠标悬停、单击等功能，其美妙之处在于将行为与当前放错位置的语义标记分开。

http://docs.jquery.com/Tutorials上的教程很容易理解，语言也很容易学习。开始通读并试一试。

祝你好运！

于 2009-09-23T13:11:54.070 回答