下拉菜单问题答案

【问题标题】：Drop-down menu problems下拉菜单问题
【发布时间】：2012-12-20 06:49:06
【问题描述】：

我在这里重新创建了我的菜单：http://jsfiddle.net/bVQ2H/2/ 正如你所看到的，它有一个下拉菜单，我想做的是在鼠标悬停在下拉菜单和“更多”按钮上时添加一个类，基本上这个类应该添加到“li”元素包含下拉菜单和“更多”按钮。

应该保留“focusedmenu”类消失之前的延迟。

我只能使用 Mootools，不能使用 jQuery。

知道如何实现吗？

JS 代码

window.addEvent('domready', function() {
  var timer;
  $$('li.submenu_explore').addEvents({
    mouseenter: function(){
      $$('li.submenu_explore').addClass('focusedmenu');
    },
    mouseleave: function(){
      timer = function(){ $$('li.submenu_explore').removeClass('focusedmenu'); }.delay(1000);
    }
  });
});

HTML 代码：

<div class="layout_core_menu_main">
  <ul id="navigation">
      <li><a href="#">Albums</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Classifieds</a></li>
      <li class="submenu_explore">
        <a href="javascript:void(0);" id="submenu_toggle">More</a>
        <ul>
          <li><a href="#">Groups</a></li>
          <li><a href="#">Videos</a></li>
          <li><a href="#">Music</a></li>
        </ul>
    </li>
  </ul>
</div>

CSS 代码：

/*
MAIN MENU
*/
.layout_core_menu_main
{
  height: 38px;
  border: 1px solid #000;
  background: #111;
}
.layout_core_menu_main > ul
{
  width: auto;
  margin: 0px auto 0px auto;
  position: relative;
}
.layout_core_menu_main > ul > li
{
  float: left;
}
.layout_core_menu_main > ul > li > a
{
  font-size: 12px;
  font-weight: bold;
  line-height: 38px;
  outline: none;
  display: inline-block;
  padding: 0px 16px;
  position: relative;
  border-right: 1px solid #000;
}
.layout_core_menu_main > ul > li > a:link, .layout_core_menu_main > ul > li > a:visited
{
   color: #EEE;
   text-decoration: none;
}
.layout_core_menu_main > ul > li > a:hover, .layout_core_menu_main > ul > li:hover > a
{
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  background: #000;
}
.layout_core_menu_main > ul > li.active > a, .layout_core_menu_main > ul > li > a:active, .layout_core_menu_main > ul li.focusedmenu > a
{
  background: #000;
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
}


/*
Submenu for MAIN MENU
*/
.layout_core_menu_main > ul > li > ul
{
  margin-top: 1px;
}
.layout_core_menu_main > ul > li:hover > ul, .layout_core_menu_main > ul li.focusedmenu ul
{
  display: block;
}
.layout_core_menu_main ul ul
{
  display: none;
  position: absolute;
  right: 0px;
  z-index: 1;
  background-color: #EEE;
  border: 1px solid #AAA;
  width: 200px;
  padding: 5px 0px;
  font-size: 12px;
  font-weight: bold;
}
.layout_core_menu_main ul ul li
{
  font-weight: bold;
}
.layout_core_menu_main ul ul li a
{
  display: block;
  padding: 0px 10px;
  line-height: 26px;
  text-align: left;
  color: #555;
  text-shadow: 1px 1px 0px #FFF;
  outline: none;
  text-decoration: none;
}
.layout_core_menu_main ul ul li a:hover, .layout_core_menu_main ul ul li.active > a
{
  color: #333;
  background: #FFF;
  text-decoration: none;
}
li.submenu_explore
{
  position: relative;
}
li.submenu_explore > a
{
  background: #000;
}

【问题讨论】：

也许我不完全理解你的问题。它似乎对我来说正常工作。该类在悬停时添加到父 <li>，并在鼠标离开后删除。
是的，是这样的，但是如果你玩一下它，你会看到当你越过UL子菜单时，li的类就消失了。
$$('li.submenu_explore, li.submenu_explore > li').addEvents({ 使其保留在子菜单中。
谢谢，我试过了，但我不认为li.submenu_explore > li 目标somwthing，反正我试过li.submenu_explore li，但还是一样。我已经更新了代码以便更好地查看：jsfiddle.net/bVQ2H/4，当您将其悬停时它第一次工作，但如果您离开并返回，它将不再正常工作。
在我的测试中工作：jsbin.com/uvoxiq/2。你使用的是什么浏览器？什么版本的 Mootools？

标签： html css drop-down-menu menu mootools

【解决方案1】：

向您的mouseenter 事件添加延迟似乎提供了一种解决方法。

mouseenter: function(){
  timer = function(){ 
    $$('li.submenu_explore').addClass('focusedmenu'); 
    $$('#Output').set('html',$$('li.submenu_explore').hasClass('focusedmenu'));                        
  }.delay(1000);
}

工作示例： http://jsbin.com/uvoxiq/5/edit

【讨论】：