代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅。
<html> <head> <style type="text/css"> div.searchButton { width: 68px; height: 24px; border: 1px solid #a8a8a8; font-family: 微软雅黑; color: #585959; font-size: 12px; line-height: 24px; text-align: center; cursor: pointer; float: left; } div.menuButton { width: 18px; height: 24px; border: 1px solid #a8a8a8; text-align: center; line-height: 24px; cursor: pointer; color: #d0d0d0; float: left; margin-left: 1px; font-size: 12px; } div.menuButton:hover { color: #000000; } div.menuButton.openMenuPanel { color: Orange; } div.menuPanel { width: 140px; height: 80px; border: 1px solid #a8a8a8; background-color: #ffffff; clear: both; } div.menuPanel div { width: 140px; height: 39px; font-family: 微软雅黑; color: #585959; font-size: 18px; line-height: 40px; text-align: center; border-bottom: 1px solid #a8a8a8; cursor: pointer; } div.menuPanel div:hover { background-color: #f1f1f1; } div.menuPanel div:last-child { border-bottom: none; height: 40px; } </style> <!-- 此处请引用jQuery和jQuery-ui库 --> <script type="text/javascript"> $(function () { $('.menuButton').click(function () { $(this).addClass('openMenuPanel'); $('.menuPanel').show(); $(document).one('click', function () { $('.menuPanel').hide(); $('.menuButton').removeClass('openMenuPanel'); }); return false; }).next().position({ my: 'left top', at: 'left bottom', of: '.searchButton' }).hide(); $('.menuPanel').children('div').click(function () { $('.searchButton').html($.trim($(this).html())); }); }); </script> </head> <body> <div class="searchButton"> 选项-1 </div> <div class="menuButton"> ▼ </div> <div class="menuPanel"> <div> 选项-1 </div> <div> 选项-2 </div> </div> </body> </html>