下拉菜单封装

下拉菜单 

使用

    g.dropdownMenu('userType1', {selectGoods:['选择1','选择2','选择3'], selectSort: []});

效果如图： 

 

下拉菜单封装 方法

g.dropdownMenu = function(id, setting) {
	setting = $.extend({
		cls: '',
		// title: '标题',
		// mode: '1',
		selectGoods: [],
		selectSort: [],
	}, setting);

	var $dropdownMenu = $('#' + id);
	var str = '';

	str += "<div class='DropdownWrap' style='width: 100%'>";
	str += "<section>";
	str += "<div class='content-box'>";
	
	str += "<div class='gdp-dropdown-menu' style='height: 20px'>";
	
	if(setting.selectGoods.length !== 0){
		str += "<div class='gdp-dropdown-menu__item' role='button'>";
		str += "<span class='gdp-dropdown-menu__title'>";
		str += "<div class='gdp-ellipsis'>" + setting.selectGoods[0] + "</div>";
		str += "</span>";
		str += "</div>";
	}
	
	if(setting.selectSort.length !== 0){
		str += "<div class='gdp-dropdown-menu__item' role='button'>";
		str += "<span class='gdp-dropdown-menu__title'>";
		str += "<div class='gdp-ellipsis'>" + setting.selectSort[0] + "</div>";
		str += "</span>";
		str += "</div>";
	}
	
	
	str += "</div>";
	
	if(setting.selectGoods.length !== 0){
		str += "<div class='gdp-popup-openArea'>";
		str += "<ul class='gdp-popup'>";
		for (let li = 0; li < setting.selectGoods.length; li++) {
			if (li !== 0) {
				str += "<li class='gdp-cell' role='button'>";
				str += "<div class='gdp-cell__title'>";
				str += "<span>" + setting.selectGoods[li] + "</span>";
				str += "</div>";
				str += "</li>";
			} else {
				str += "<li class='gdp-cell' role='button'>";
				str += "<div class='gdp-cell__title gdp-dropdown-item__option--active'>";
				str += "<span>" + setting.selectGoods[li] + "</span>";
				str += "</div>";
				str += "<span class='iconfont icon-gouxuan'></span>";
				str += "</li>";
			}
		}
		
		// str += "<li class='multiple-choice'>";
		// str += "<div class='choice-button' role='button'>"
		// str += "<span>是否多选</span>";
		// str += "</div>";
		// str += "<div class='choice-button' role='button'>";
		// str += "<div role='switch' aria-checked='false' class='gdp-switch'>";
		// str += "<div class='gdp-switch__node'></div>";
		// str += "</div>";
		// str += "</div>";
		// str += "</li>";
		str += "</ul>";
		str += "</div>";
		// str += "<div class='gdp-overlay'></div>";
	}
	
	
	if(setting.selectSort.length !== 0){
		str += "<div class='gdp-popup-openArea'>";
		str += "<ul class='gdp-popup'>";
		for (let li = 0; li < setting.selectSort.length; li++) {
			if (li !== 0) {
				str += "<li class='gdp-cell' role='button'>";
				str += "<div class='gdp-cell__title'>";
				str += "<span>" + setting.selectSort[li] + "</span>";
				str += "</div>";
				str += "</li>";
			} else {
				str += "<li class='gdp-cell' role='button'>";
				str += "<div class='gdp-cell__title gdp-dropdown-item__option--active'>";
				str += "<span>" + setting.selectSort[li] + "</span>";
				str += "</div>";
				str += "<span class='iconfont icon-gouxuan'></span>";
				str += "</li>";
			}
		
		}
		
		// str += "<li class='multiple-choice'>";
		// str += "<div class='choice-button' role='button'>"
		// str += "<span>是否多选</span>"
		// str += "</div>";
		// str += "<div class='choice-button' role='button'>";
		// str += "<div role='switch' aria-checked='false' class='gdp-switch'>";
		// str += "<div class='gdp-switch__node'></div>";
		// str += "</div>";
		// str += "</div>";
		// str += "</li>";
		str += "</ul>";
		str += "</div>";
		// str += "<div class='gdp-overlay'></div>";
	}
	
	str += "</div>";
	str += "</section>";
	str += "</div>";

	$dropdownMenu.html(str);

	let gdpContentBox = $(".content-box");
	let selectIndex = [];
	let timeout;
	let switchArray = [false, false];
	let numOfMenuItem = $dropdownMenu.find(".gdp-dropdown-menu__item").length;
	let gdpMenuItem = $dropdownMenu.find(".gdp-dropdown-menu__item");
	let gdpMenuItemTitle = $dropdownMenu.find(".gdp-dropdown-menu__title");
	let gdpPopup = $dropdownMenu.find(".gdp-popup");
	let gdpOpenArea = $dropdownMenu.find(".gdp-popup-openArea");
	let gdpOverlay = $dropdownMenu.find(".gdp-overlay");
	let gdpMultipleChoice = $dropdownMenu.find(".multiple-choice");
	
	selectIndex.push([]);
	
	for (let i = 0; i < numOfMenuItem; i++) {
		let numOfCell = gdpPopup.eq(i).children(".gdp-cell").length;
		let gdpCell = gdpPopup.eq(i).children(".gdp-cell");
		//获取弹出框高度
		let popupHeight = gdpPopup.eq(i).height();
		
		gdpOpenArea.eq(i).css("height", popupHeight + 200)
		gdpPopup.eq(i).css("top", -popupHeight);
		gdpOpenArea.eq(i).hide();
		
		gdpMenuItem.eq(i).click(function() {
			//先清理
			clearTimeout(timeout)
			timeout = setTimeout(() => {
				//点击菜单项，兄弟节点菜单标题变黑，三角符号复原
				gdpMenuItem.eq(i).siblings(".gdp-dropdown-menu__item").children(
						".gdp-dropdown-menu__title")
					.removeClass("gdp-dropdown-menu__title--active");
				gdpMenuItem.eq(i).siblings(".gdp-dropdown-menu__item").children(
						".gdp-dropdown-menu__title")
					.removeClass("gdp-dropdown-menu__title--down");

				//在此处写调用的方法，可以实现仅最后一次操作生效
				gdpMenuItemTitle.eq(i).toggleClass("gdp-dropdown-menu__title--active");
				gdpMenuItemTitle.eq(i).toggleClass("gdp-dropdown-menu__title--down");
				
				//隐藏openArea，以免遮挡选项
				if(gdpOpenArea.css('display') === 'none'){
					gdpOpenArea.show();
				}else{
					// 延时隐藏保持popup向上滑动效果
					setTimeout(function(){
						gdpOpenArea.hide();
					}, 200)
				}

				//点击菜单项，兄弟节点弹出框收回，阴影消失

				gdpOpenArea.eq(i).siblings(".gdp-popup-openArea").find(".gdp-popup").css({
					"top": "-" + gdpOpenArea.eq(i).siblings(".gdp-popup-openArea").find(
						".gdp-popup").height() + "px"
				});
				// // gdpPopup.eq(i).siblings(".gdp-popup").find(".gdp-overlay").css('display','none');
				gdpOverlay.eq(i).siblings(".gdp-overlay").css('display', 'none')

				// if判断是否弹出还是收回
				// gdpPopup.eq(i).slideToggle("fast");
				if (gdpPopup.eq(i).css("top") !== "0px") {
					//弹出框弹出
					gdpPopup.eq(i).css({
						"top": "0px"
					});
				} else {
					//弹出框收回
					gdpPopup.eq(i).css({
						"top": "-" + popupHeight + "px"
					});
					// console.log(popupHeight)
					// gdpPopup.eq(i).css({
					// 	"top": "-280px"
					// });
				}
				gdpOverlay.eq(i).fadeToggle(150);

			}, 200)
			//点击菜单项弹出下拉菜单代码
			//点击菜单项，菜单标题变红，三角符号转动

		
		})

		//下拉菜单的列表和阴影部分代码

		let multipleTitle = [];
		let gdpCellOneText = "";
		let multipleGdpCellText = "";
		selectIndex.push([]);
		for (let n = 0; n < numOfCell; n++) {
			// 默认选中第一项
			if (n == 0) {
				selectIndex[i].push(1);
			} else {
				selectIndex[i].push(0);
			}
			let gdpCellOne = gdpPopup.eq(i).children(".gdp-cell").eq(n);
			gdpCellOne.click(function() {
				// if判断是否为多选，分两种情况执行代码
				if (!switchArray[i]) {
					// 单选时选择后没标记的加标记，有的就不用变
					if (!(gdpCellOne.children(".gdp-cell__title").hasClass(
							"gdp-dropdown-item__option--active"))) {
						//列表项标题点击标色
						gdpCellOne.children(".gdp-cell__title").addClass(
							"gdp-dropdown-item__option--active");
						//列表项点击加上勾选
						gdpCellOne.append("<span class='iconfont icon-gouxuan'></span>");

					}
					//选择一项后，更换别的列表项的标题和删除别的列表项的对勾
					gdpCellOne.siblings(".gdp-cell").children(".gdp-cell__title").removeClass(
						"gdp-dropdown-item__option--active");
					gdpCellOne.siblings(".gdp-cell").children(".icon-gouxuan").remove();

					//选择一项后更换菜单项标题
					gdpCellOneText = gdpCellOne.children(".gdp-cell__title").text().trim();
					gdpMenuItem.eq(i).children(".gdp-dropdown-menu__title").text(gdpCellOneText);

					// 选择完毕后关闭下拉菜单
					gdpMenuItemTitle.eq(i).toggleClass("gdp-dropdown-menu__title--active");
					gdpMenuItemTitle.eq(i).toggleClass("gdp-dropdown-menu__title--down");
					// gdpPopup.eq(i).slideUp("fast");
					//弹出框收回
					gdpPopup.eq(i).css({
						"top": "-" + popupHeight + "px"
					});
					gdpOverlay.eq(i).fadeOut(150);

					//隐藏openArea，以免遮挡选项
					if(gdpOpenArea.css('display') === 'none'){
						gdpOpenArea.show();
					}else{
						// 延时隐藏保持popup向上滑动效果
						setTimeout(function(){
							gdpOpenArea.hide();
						}, 200)
					}

					// 单选情况选中一项后清空兄弟索引
					selectIndex[i].fill(0);
					selectIndex[i][n] = 1;
					console.log(selectIndex[i])
				} else if (switchArray[i]) {
					//多选时重复点击选项会复原且去掉选中
					if (gdpCellOne.children(".gdp-cell__title").hasClass(
							"gdp-dropdown-item__option--active")) {
						//列表项标题点击复原
						gdpCellOne.children(".gdp-cell__title").removeClass(
							"gdp-dropdown-item__option--active");
						//列表项点击去掉勾选
						gdpCellOne.children(".icon-gouxuan").remove();
						//删除选中
						gdpCellOneText = gdpCellOne.children(".gdp-cell__title").text().trim();
						for (let j = 0; j < multipleTitle.length; j++) {
							if (gdpCellOneText == multipleTitle[j]) {
								multipleTitle.splice(j, 1);
								console.log(multipleTitle)
								break;
							}
						}
						multipleGdpCellText = multipleTitle.join()
						gdpMenuItem.eq(i).children(".gdp-dropdown-menu__title").text(
							multipleGdpCellText);

						selectIndex[i][n] = 0; //多选情况下重复点击，索引去除
						console.log(selectIndex[i])
						return
					}
					//列表项标题点击标红
					gdpCellOne.children(".gdp-cell__title").addClass(
						"gdp-dropdown-item__option--active");
					//列表项点击加上红勾
					gdpCellOne.append("<span class='iconfont icon-gouxuan'></span>");

					//选择一项后更换菜单项标题
					gdpCellOneText = gdpCellOne.children(".gdp-cell__title").text().trim();
					multipleTitle.push(gdpCellOneText);
					multipleGdpCellText = multipleTitle.join()
					gdpMenuItem.eq(i).children(".gdp-dropdown-menu__title").text(
						multipleGdpCellText);
					console.log(multipleTitle)
					selectIndex[i][n] = 1; //点击添加索引
					console.log(selectIndex[i])
				}

			})
		}

		//点击阴影关闭下拉菜单,复原菜单项
		gdpOverlay.click(function() {
			gdpMenuItemTitle.eq(i).removeClass("gdp-dropdown-menu__title--active");
			gdpMenuItemTitle.eq(i).removeClass("gdp-dropdown-menu__title--down");
			//弹出框收回
			gdpPopup.eq(i).css({
				"top": "-" + popupHeight + "px"
			});
			gdpOverlay.fadeOut(150);
		})

		//多选按钮点击事件代码
		gdpMultipleChoice.eq(i).find(".gdp-switch").click(function() {
			switchArray[i] = !switchArray[i];
			// 点击多选清空多选列表和下拉菜单项所有的选中状态
			multipleTitle = [];
			gdpMultipleChoice.eq(i).find(".gdp-switch").toggleClass("gdp-switch--on");
			gdpMultipleChoice.eq(i).find(".gdp-switch__node").toggleClass("gdp-switch__node--on");
			gdpCell.children(".gdp-cell__title").removeClass("gdp-dropdown-item__option--active");
			gdpCell.children(".icon-gouxuan").remove();
		})
	}
	
}

css(但是可能有所缺失）

* {
	margin: 0;
	padding: 0;
}

.DropdownWrap {
	width: 100%;
}

.DropdownWrap header {
	width: 100%;
	height: 3.75rem;
	display: flex;
	justify-content: center;
	position: relative;
	line-height: 3.75rem;
}

.gdp-nav__back {
	height: 1.5rem;
	width: 1.5rem;
	position: absolute;
	left: 0;
	top: 1.0625rem;
	margin-left: 1rem;
}

.gdp-nav__title {
	font-weight: 600;
	font-size: 1.0625rem;
	text-transform: capitalize;
}

.content-box {
	position: relative;
}

.box-title {
	margin: 0;
	padding: 1rem;
	color: rgba(69, 90, 100, 0.6);
	font-weight: normal;
	font-size: 0.875rem;
	line-height: 1rem;
	background-color: #f7f8fa;
}

.gdp-dropdown-menu {
	position: relative;
	user-select: none;
	display: flex;
	height: 48px;
	background-color: #fff;
	/* box-shadow: 0 0.125rem 0.75rem rgba(100, 101, 102, 0.12); */
	border-bottom: 1px solid #eee;
}

.gdp-dropdown-menu__item {
	flex: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	min-width: 0;

	display: flex;
}

.gdp-dropdown-menu__title {
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	white-space: nowrap;
	height: 1.25rem;
	padding: 0 0.625rem;
	color: #323233;
	font-size: 0.9375rem;
	line-height: 1.375rem;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gdp-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: auto;
}

.gdp-dropdown-menu__title::after {
	position: absolute;
	top: 50%;
	right: 0.0625rem;
	margin-top: -0.3125rem;
	border: 0.1875rem solid;
	border-color: transparent transparent #dcdee0 #dcdee0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	opacity: 0.8;
	content: '';
}

.gdp-dropdown-menu__title--active {
	color: rgb(25, 137, 250);
}

.gdp-dropdown-menu__title--down::after {
	margin-top: -0.0625rem;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.gdp-dropdown-menu__title--active::after {
	border-color: transparent transparent currentColor currentColor;
}

.gdp-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;

}

.gdp-popup-openArea {
	width: 100%;
	min-height: 500px;
	position: absolute;
	overflow: hidden;
	/* display: none; */
	/* z-index: 2; */
}

.gdp-popup {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: all 0.2s;
	width: 100%;
	top: -1000px;
	position: absolute;
	z-index: 10;
	overflow-y: auto;
	background-color: #fff;
}

.gdp-cell {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	width: 100%;

	padding: 0.625rem 1rem;
	overflow: hidden;
	color: #323233;
	font-size: 0.875rem;
	line-height: 1.5rem;
	background-color: #fff;
}

.gdp-cell::after {
	position: absolute;
	box-sizing: border-box;
	content: ' ';
	pointer-events: none;
	right: 1rem;
	bottom: 0;
	left: 1rem;
	border-bottom: 0.0625rem solid #ebedf0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.gdp-cell__title {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}

.icon-gouxuan {
	color: rgb(25, 137, 250);
}


.gdp-dropdown-item__option--active {
	color: rgb(25, 137, 250);
}

.multiple-choice {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	width: 100%;

	padding: 0.625rem 1rem;
	overflow: hidden;
	color: #323233;
	font-size: 0.875rem;
	line-height: 1.5rem;
	background-color: #fff;
}

.choice-button {
	flex: 1;
}

.gdp-switch {
	position: relative;
	display: inline-block;
	box-sizing: content-box;
	width: 2em;
	height: 1em;
	font-size: 1.875rem;
	background-color: #fff;
	border: 0.0625rem solid rgba(0, 0, 0, 0.1);
	border-radius: 1em;
	cursor: pointer;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
	float: right;
}

.gdp-switch__node {
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	background-color: #fff;
	border-radius: 100%;
	box-shadow: 0 0.1875rem 0.0625rem 0 rgb(0 0 0 / 5%), 0 0.125rem 0.125rem 0 rgb(0 0 0 / 10%), 0 0.1875rem 0.1875rem 0 rgb(0 0 0 / 5%);
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
	transition: -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
	transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
	transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05), -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
}

.gdp-switch--on {
	background-color: rgb(25, 137, 250);
}

.gdp-switch__node--on {
	-webkit-transform: translateX(1em);
	transform: translateX(1em);
}
/* 用户类型 */
.typeTip{
	font-size:17px;
}
#userType1{
display: inline-block;	
font-size:17px;
}
.gdp-ellipsis{
	width:100px !important;
}
.gdp-dropdown-menu__title{
	width:100px !important;
}
.gdp-cell{
	width:100px !important;
}
.gdp-dropdown-menu{
	height: 30px !important;
	line-height: 30px !important;
}
.gdp-dropdown-menu__title{
	height: 30px;
	    line-height: 30px;
	    font-size: 17px !important;
}
.gdp-cell__title>span{
	  font-size: 17px !important;
}
.gdp-dropdown-menu__title::after{
	border-color:transparent transparent #000 #000 !important;
}

标签：gdp,__,封装,title,dropdown,str,eq,下拉菜单
来源： https://blog.csdn.net/enhenglhm/article/details/122213513