Question

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

应该保留在“focusmenu”课程消失之前的延迟。

我只能使用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;
}

Answer 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

下拉菜单问题

1 个答案: