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>
<script>
	var app = new Vue({
		el: "#app",
		data() {
			return {
				list: [{
						index: 0,
						name: '目的地',
						itemList: [{
								name: '马累',
								nameShow: false
							},
							{
								name: '马尔代夫',
								nameShow: false
							},
							{
								name: '双鱼岛',
								nameShow: false
							},
							{
								name: '宁静岛',
								nameShow: false
							},
							{
								name: '茉莉岛',
								nameShow: false
							}
						],
						setName: '多选',
						itemState: false,
						selectList: [],
						itemRowShow: true
					},
					{
						index: 1,
						name: '途径地',
						itemList: [{
								name: '马尔代夫',
								nameShow: false
							},
							{
								name: '双鱼岛',
								nameShow: false
							},
							{
								name: '茉莉岛',
								nameShow: false
							}
						],
						setName: '多选',
						itemState: false,
						selectList: [],
						itemRowShow: true
					},
					{
						index: 2,
						name: '选择天数',
						itemList: [{
								name: '4天',
								nameShow: false
							},
							{
								name: '7天',
								nameShow: false
							},
							{
								name: '10天',
								nameShow: false
							}
						],
						setName: '多选',
						itemState: false,
						selectList: [],
						itemRowShow: true
					}
				],
				sureList: [],
				itemIndex: null,
				selectShow: true
			}
		},
		mounted: function() {},
		methods: {
			itemClick(int, index) {
				this.list[int].itemList[index].nameShow = true;
				if (this.list[int].itemState) {//多选
					if(this.list[int].selectList.indexOf(this.list[int].itemList[index].name)<=-1){
						this.list[int].selectList.push(this.list[int].itemList[index].name)
					}
				} else {
					this.list[int].selectList = [];
					this.list[int].selectList.push(this.list[int].itemList[index].name)
					this.sureList.push(this.list[int]);
					this.list[int].itemList[index].nameShow = true;
					setTimeout(() => {
						this.list[int].itemRowShow = false;
						for (var i in this.list[int].itemList) {
							this.list[int].itemList[i].nameShow = false
						}
					}, 300)
				}
			},
			resetClick() { /* 清除 */
				for (var i in this.list) {
					this.list[i].itemRowShow = true;
					for (var k in this.list[i].itemList) {
						this.list[i].itemList[k].nameShow = false;
					}
					this.list[i].selectList=[];
					this.list[i].itemState=false;
				}
				this.sureList = [];
			},
			minItemClick(minIndex) {//已选择每项的x键
				for (var i in this.list) {
					if (this.list[i].index == this.sureList[minIndex].index) {
						this.list[i].itemRowShow = true;
						this.list[i].itemState=false;
						for(var k in this.list[i].itemList){
							this.list[i].itemList[k].nameShow = false;
						}
					}
				}
				this.sureList.splice(minIndex, 1)
			},
			btnClick(index) {//多选按钮
				this.list[index].itemState = !this.list[index].itemState;
				if(this.list[index].itemState){
					this.list[index].selectList=[]
				}
			},
			sureClick(index){//多选下的确定按钮
				this.sureList.push(this.list[index]);
				setTimeout(() => {
					this.list[index].itemRowShow = false;
				}, 200)
			},
			cancelClick(index){//多选下的取消按钮
				this.list[index].selectList=[];
				for(var i in this.list[index].itemList){
					this.list[index].itemList[i].nameShow=false
				}
			}
		}
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章