自定义DropDown下拉菜单

说明：

一个简单的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);