手機移動端下拉框

• 效果
  -開啟
  

• 點選

• 選中

1. 新增base.css樣式
2. 新增jquery.min.js
3. 新增font-awesome-4.7.0資料夾，用於改變下拉框後面的圖示為箭頭
4. 寫前臺頁面
   5.index.html頁面
   `

<section class="job-module">
	<dl class="retrie">
		<dt>
			<a class="Typeshow" id="xm" href="javascript:;"><span>專案型別</span> <i class="fa fa-caret-down"></i> </a>
			<a class="Typeshow" id="jy" href="javascript:;"><span>交易結果</span> <i class="fa fa-caret-down"></i> </a>
			<a class="Typeshow" id="dq" href="javascript:;"><span>地區</span> <i class="fa fa-caret-down"></i> </a>
		</dt>
		<dd class="xm">
			<ul class="slide downlist">
				<li data-id="64" data-name="專案型別" onclick="UpDataList(this)"><a href="#">專案型別</a></li>
				<li data-id="88" data-name="政府採購" onclick="UpDataList(this)"><a href="#">政府採購</a></li>
				<li data-id="81" data-name="土地礦業" onclick="UpDataList(this)"><a href="#">土地礦業</a></li>
			</ul>
		</dd>
		<dd class="jy">
			<ul class="slide downlist">
				<li data-id="555" data-name="交易結果" onclick="UpDataList(this)"><a href="#">交易結果</a></li>
				<li data-id="111" data-name="補充公告" onclick="UpDataList(this)"><a href="#">補充公告</a></li>
				<li data-id="222" data-name="其他公告" onclick="UpDataList(this)"><a href="#">其他公告</a></li>
			</ul>
		</dd>
		<dd class="dq">
			<ul class="slide downlist">
				<li data-id="71" data-name="地區" onclick="UpDataList(this)"><a href="#">地區</a></li>
				<li data-id="88" data-name="甘肅" onclick="UpDataList(this)"><a href="#">甘肅</a></li>
				<li data-id="66" data-name="金昌" onclick="UpDataList(this)"><a href="#">金昌</a></li>
				<li data-id="66" data-name="成都1" onclick="UpDataList(this)"><a href="#">成都1</a></li>
				<li data-id="66" data-name="成都2" onclick="UpDataList(this)"><a href="#">成都2</a></li>
				<li data-id="66" data-name="成都3" onclick="UpDataList(this)"><a href="#">成都3</a></li>
				<li data-id="66" data-name="成都4" onclick="UpDataList(this)"><a href="#">成都4</a></li>
				<li data-id="66" data-name="成都5" onclick="UpDataList(this)"><a href="#">成都5</a></li>
				<li data-id="66" data-name="成都6" onclick="UpDataList(this)"><a href="#">成都6</a></li>
				<li data-id="66" data-name="成都7" onclick="UpDataList(this)"><a href="#">成都7</a></li>
				<li data-id="66" data-name="成都8" onclick="UpDataList(this)"><a href="#">成都8</a></li>
				<li data-id="66" data-name="成都9" onclick="UpDataList(this)"><a href="#">成都9</a></li>
				<li data-id="66" data-name="成都0" onclick="UpDataList(this)"><a href="#">成都0</a></li>
				<li data-id="66" data-name="成都65" onclick="UpDataList(this)"><a href="#">成都65</a></li>
				<li data-id="66" data-name="成都11" onclick="UpDataList(this)"><a href="#">成都11</a></li>
				
			</ul>
		</dd>
	</dl>
</section>







<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function () {

		$('.Typeshow').click(function () {
			var $t = $(this);
			if ($t.find("i").hasClass('fa-caret-up')) {
				$('.downlist').hide();
				$t.find("i").removeClass("fa-caret-up").addClass('fa-caret-down');

			} else {
				$(".Typeshow").removeClass('up');
				$('.downlist').hide();
				$t.addClass('up');
				$('.downlist').eq($(".Typeshow").index($(this)[0])).show();
				$(".fa").removeClass("fa-caret-up").addClass('fa-caret-down')
				$t.find("i").removeClass("fa-caret-down").addClass('fa-caret-up');

				//清除下拉選項中所有的選中class並重新新增
				$(".xm ul li a").removeClass('selected');
				$(".jy ul li a").removeClass('selected');
				$(".dq ul li a").removeClass('selected');
				$(".xm ul li a:contains('"+$('#xm span').text()+"')").addClass('selected');
				$(".jy ul li a:contains('"+$('#jy span').text()+"')").addClass('selected');
				$(".dq ul li a:contains('"+$('#dq span').text()+"')").addClass('selected');

				//下拉個數多的情況
				var Listlength=$(".downlist");
				for (let i = 0; i < Listlength.length; i++) {
					if ($(Listlength[i]).children().length>8) {
						$(Listlength[i]).css("height","460px")
					}
					
				}
			}
		});

	});


	function UpDataList(thisVal) {
		UpClassCss(thisVal);
		//獲取當前元素本身this
		var $t = $(thisVal);
		//獲取自定義id和name的值
		var id = $t.attr("data-id");
		var name = $t.attr("data-name");
		//alert(id+"|"+name);

	}

	function UpClassCss(thisVal) {
		var $t = $(thisVal);
		var name = $t.attr("data-name");
		//所有的下拉隱藏
		$('.downlist').hide();
		//獲取上級元素的class
		var tabId = $t.parent().parent().attr("class");
		//下拉框文字改變
		$("#" + tabId + " span").text(name);
		$(".fa").removeClass("fa-caret-up").addClass('fa-caret-down')
	}

</script>
 

5. 完整程式碼
   連結：https://pan.baidu.com/s/1BSb5FSzZzV4aS0XZ8ok_Pg
   提取碼：x40l