使用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)); 

如果不出意外，它應該幫助給你你怎麼做的一些想法決定去做。