自定义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);

自定义DropDown下拉菜单相关推荐

解决bootstrap dropdown 下拉菜单有时候不能显示的问题
解决bootstrap dropdown 下拉菜单有时候不能显示的问题参考文章: (1)解决bootstrap dropdown 下拉菜单有时候不能显示的问题 (2)https://www.cnbl ...
html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
了解elementUI的Form 表单和Dropdown 下拉菜单
Form 表单由输入框.选择器.单选框.多选框等控件组成,用以收集.校验.提交数据 el-form el-form-item el-select el-option <el-form :inl ...
vue、Dropdown 下拉菜单、Dropdown属性事件、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性事件
vue.Dropdown 下拉菜单.Dropdown属性事件.vue Dropdown 全部下拉菜单.vue Dropdown 全部属性事件设计规则何时使用代码演示 1.基本 2.右键菜单 3. ...
在Angular 8中使用自定义MultiSelect下拉菜单创建动态行
目录介绍如何工作? 先决条件使用代码第1步第2步第3步第4步第5步第6步第7步第8步第9步第10步第11步结论介绍在本文中,我们将学习如何使用Angular 8创建动 ...
关于element-plus的Dropdown 下拉菜单属性的修改
** 关于element-plus的dropdown的下拉菜单的样式修改 ** 因为所做的界面和element-plus所提供的颜色不相搭配,所以进行了颜色的修改 1.首先是下拉框本身可以看见原本的 ...
vue实现Dropdown下拉菜单
1.需求点击按钮出现下拉菜单 2.思路为按钮绑定点击事件showPicker() 在按钮下另起一个div标签,用v-show绑定一个属性值isShowDropdown 在methods里定义sho ...
android spinner自定义样式,android自定义Spinner下拉菜单(下拉列表框)样式
在Android中Spinner就是下拉菜单,它相当于HTML中的标签. Android中提供的Spinner Widget下拉菜单已经非常好用了,样式也适用, 不过我们还是可以通过定义xml的方式来 ...
android自定义下拉筛选,android自定义Spinner下拉菜单(下拉列表框)样式
在Android中Spinner就是下拉菜单,它相当于HTML中的标签. Android中提供的Spinner Widget下拉菜单已经非常好用了,样式也适用, 不过我们还是可以通过定义xml的方式来 ...

自定义DropDown下拉菜单

自定义DropDown下拉菜单相关推荐

最新文章

热门文章