JS仿携程分类选择栏特效代码下载


JS仿携程分类选择栏特效代码下载
JS仿携程分类选择栏特效代码下载以及仿携程分类、选择栏等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/main.js"></script>

2. HTML代码

		<div id="app">
			<div class="box">
				<div class="main" id="main">
					<div class="itemRow" v-for="(item,index) in list" :key="index" v-show="item.itemRowShow">
						<div class="showFrame clearfix">
							<span class="fl nameFrame">{{item.name}}</span>
							<dl class="fl clearfix">
								<dd class="fl" v-for="(items,index) in item.itemList" :key="index" :class="{active:items.nameShow}" @click="itemClick(item.index,index)">{{items.name}}</dd>
							</dl>
							<div class="btn fr" :style={background:item.itemState?'#0086f6':'#eef1f6'} @click="btnClick(item.index)">
								<span>{{item.setName}}</span>
								<span>+</span>
							</div>
						</div>
						<div class="hideFrame clearfix" v-show="item.itemState">
							<div class="fl hideItem" v-for="(int,index) in item.selectList" :key="index">{{int}}</div>
						</div>
						<div class="btnFrame" v-show="item.itemState">
							<span @click="cancelClick(item.index)">取消</span>
							<span @click="sureClick(item.index)">确定</span>
						</div>
					</div>
				</div>
				<div class="selectFrame clearfix">
					<span class="fl nameFrame">已选择</span>
					<ul class="fl selectList" id="selectList">
						<li v-for="(sureItem,index) in sureList" :key="index">
							<div class="sureName">{{sureItem.name}}</div>
							<i>-</i>
							<span v-for="(minItem,index) in sureItem.selectList" :key="index">
								{{minItem}}
							</span>
							<i @click="minItemClick(index)">×</i>
						</li>
					</ul>
					<span class="fr reset" @click="resetClick">清除</span>
				</div>
			</div>
		</div>

相关推荐

发表评论

相关文章