使用HTML和Javascript创建Mac OS X标题栏样式菜单

Question

我正在网站上工作。我想要创建的菜单类型是在菜单中点击某个项目的位置，并弹出一个子菜单。但是，您也可以将鼠标悬停在任何其他菜单项上，然后出现另一个子菜单，隐藏您点击的第一个菜单项。您可以点击任何地方关闭子菜单。

我希望这已经够清楚了，并且希望您能给予的帮助。

Answer 1

Here's my very, very simple, cheap, brief, ugly, lazy, father-disappointing version。它使用jQuery，它可能实际上看起来不像你想要的。但它完成（我认为）一个重要的事情：“锁定”子菜单打开，直到打开另一个菜单，或者用户单击页面上的其他位置。

的HTML看起来像这样...

<ul> 
    <li> 
     <a class="author" href="#">Menu Item 1</a> 
     <ul class="books"> 
      <li><a class="book" href="#">Sub-Menu Item 1</a></li> 
      <li><a class="book" href="#">Sub-Menu Item 2</a></li> 
     </ul> 
    </li> 
    <!-- ... --> 
</ul> 

...这是JavaScript的：

(function ($) { 
    var $current, 
     closeSubMenu = function() { 
      if ($current) { 
       $current.slideUp(); 
      } 
     }, 
     openSubMenu = function (e) { 
      var $books = $(this).next(); 
      e.preventDefault(); 
      e.stopPropagation(); 
      if (!$current || $current[0] !== $books[0]) { 
       closeSubMenu(); 
       $current = $books; 
       $books.slideDown(); 
      } 
     }; 

    $(document).click(function (e) { 
      var $target = $(e.target); 
      if ($target.hasClass('author')) { 
       openSubMenu.call(e.target, e); 
      } else if ($target.hasClass('book')) { 
       e.preventDefault(); 
      } else { 
       closeSubMenu(); 
       $current = null; 
      } 
     }); 
    $('.books').slideUp(); 
}(jQuery)); 

如果不出意外，它应该帮助给你你怎么做的一些想法决定去做。