伪类实现点击隐藏栏

 老规矩，先来看效果

<view class="search">
	<view class="search-text">{{option}}
	    <view class="accountItem" ref="accoutItem">
			<ul>
				<li data-options="1" @click="options">手机号</li>
				<li data-options="2" @click="options">订单号</li>
			</ul>
		</view>
    </view>
</view>

/*
初始化样式表用的是
li{list-style:none} 
ul{margin: 0;padding: 0;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
*/

.search {
		position:relative;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
        .search-text:hover .accountItem{
			display:block;
		}
		.search-text::after {
			content: '\25BC';
		}
		.accountItem li:hover{
			background:rgb(77, 168, 255);
			color:#fff;
		}
		.accountItem{
			position: absolute;
			top: 40rpx;
			left: 0;
			display: none;
			width: 120rpx;
			background: #fff;
			color: #444;
			text-align: center;
		}
	}