说明：
一个简单的js下拉框，因为目前都不怎么用到jquery了，也好久没写过jquery了，现在框架很多，基本上也用不到，只是以这个简单的例子玩一下。
先来看下效果图：
简单的下拉弹框下拉选项，支持滚动适应弹出方向。
<div class="mc-dropdown" id="dropdown"><button class="mc-btn-default">更多汽车</button><ul class="mc-dropdown-menu"><li><a id="drop_a" href="javascript:;">特斯拉</a></li><li><a href="javascript:;">宝马</a></li><li><a href="javascript:;">凯迪拉克</a></li><li><a href="javascript:;">保时捷</a></li></ul></div>
具体代码：
(function ($) {$.fn.DropDown =function (options){// 默认参数var defaults = {};// 合并参数options = $.extend(defaults, options);var drops = $('.mc-dropdown');var uls = $('body > .mc-dropdown-menu');var btns = drops.find('button');var id = $(this).attr('id');var oUl = $(this).find('ul');oUl.attr('id', id + '_menu');$(this).find('ul').remove();$('body').append(oUl);var oLi = oUl.find('li');var popperArrow = $("<div class='popper-arrow'></div>")oUl.append(popperArrow);var ul_height = oUl.outerHeight();$(this).find('button').on('click', btnClick);oLi.find('a').on('click', itemClick);$(document).click(function (){$(this).find('button').removeClass('mc-btn-active');oUl.hide();})var $this = $(this);$(window).resize(function (){layout.call($this.find('button'));})// 跟随document.addEventListener('scroll', function () {layout.call($this.find('button'));},true)function btnClick(){btns.removeClass('mc-btn-active');var $ul = $('#' + id + '_menu')if ($ul.is(':hidden')){$(this).addClass('mc-btn-active');$('.mc-dropdown-menu').hide()$ul.show();}else{$(this).removeClass('mc-btn-active');$('.mc-dropdown-menu').hide()$ul.hide();}layout.call(this);return false;}function itemClick(){btns.removeClass('mc-btn-active');oUl.hide();}function layout (){var $this_btn = $($this.context.activeElement)var btn_height = $this_btn.parent().height();var btn_width = $this_btn.parent().width();var selfBtnOffsetTop = $this_btn.parent().offset().top;var selfBtnOffsetLeft = $this_btn.parent().offset().left;var win_height = $(window).height();var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;// var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;var selfBtnTop = selfBtnOffsetTop - scrollTop;var selfBtnBottom = selfBtnTop + btn_height;// var selfBtnLeft = selfBtnOffsetLeft - scrollLeft;if(selfBtnBottom + ul_height < win_height){// 向下弹oUl.css({top: selfBtnOffsetTop + btn_height + 6 + 'px',bottom: 'auto',left: selfBtnOffsetLeft + 'px',minWidth: btn_width - 4 + 'px'})oUl.find('.popper-arrow').removeClass('bt')}else{if(ul_height > win_height * 0.5){// 贴地面var dd = scrollTop + win_height - ul_height;oUl.css({top: dd + 'px',bottom: 'auto',left: selfBtnOffsetLeft + 'px',minWidth: btn_width - 4 + 'px'});oUl.find('.popper-arrow').removeClass('bt')}else{// 向上弹oUl.css({top: selfBtnOffsetTop - ul_height - 6 + 'px',bottom: 'auto',minWidth: btn_width - 4 + 'px',left: selfBtnOffsetLeft + 'px'});oUl.find('.popper-arrow').addClass('bt')}}oUl.find('.popper-arrow').css('left', btn_width * 0.5 + 'px')}}})(jQuery);
