优雅实现jQuery折叠展开下拉菜单

在网页设计中，下拉菜单是一种非常实用的交互元素，它可以帮助用户更高效地浏览网站内容。本文将展示如何利用 jQuery 来实现一个具有折叠和展开效果的下拉菜单。

HTML 结构

  

    朋友们
    切换显示
  

  

    

      
学无止境

      
学?无?止?境

      
学?无?止?境

      
学?无?止?境

      
学?无?止?境

      
学?无?止?境

      
学?无?止?境

    

  

  

  

CSS 样式

a img { border: 0; }
.menu-clearfix { clear: both; }
a { text-decoration: none; color: #fff; }
a:hover { text-decoration: none; }
body { background: #000 url('img/bg.jpg') repeat-x top center; font-family: Arial; font-size: 12px; }
.menu-header { float: right; width: 300px; overflow: hidden; }
.menu-header .menu-title:first-child { margin-top: 0; }
.menu-header .menu-content { padding: 5px; background: #222 url('img/box_bg.gif') repeat-x top; float: left; width: 290px; }
.menu-header .menu-footer { background: url('img/box_bottom.gif') repeat-x top; height: 10px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; margin-bottom: 15px; clear: both; }
.menu-header span { display: block; width: 300px; height: 42px; background: url('img/heading_right.gif'); font-size: 16px; line-height: 40px; font-weight: bold; text-transform: uppercase; text-indent: 10px; position: relative; color: #999; margin-top: 15px; }
.menu-header .toggle-btn { display: block; width: 28px; height: 27px; background: url('img/toggle_right.gif') no-repeat 0 0; line-height: 27px; text-indent: -999px; overflow: hidden; position: absolute; top: 7px; right: 7px; outline: none; }
.menu-header .toggle-btn.hide { background-position: -28px 0; }
.menu-header .toggle-btn.show { background-position: 0 0; }
.menu-header a { color: #999; }
.menu-header a img { display: none; }

Javascript (jQuery) 脚本

更新日志

2011-5-21 更新：

下载：优雅下拉菜单