javascript - 带有可折叠子项的 html 复选框选择列表
问题描述
我正在使用 Vue.js 和 HTML、SCSS 来创建一个网站,并且需要创建一个类似于下面 gif 的下拉菜单
上面的GIF显示在选择酒店时下拉菜单应如何运作。下拉菜单应显示该酒店内可用的房间类型。
我已经使用 HTML 和 vue 创建了上面的示例v-if
。但是代码很庞大并且有错误,是否有任何包或提供类似下拉列表的示例。有人可以建议我吗?
提前致谢...
我的代码,
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-family: "Open Sans";
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: grey;
line-height: 1.5;
margin-left: 20px;
font-size: 16px;
width: 229px;
height: 60px;
border: solid 1px #e9e9e9;
border-radius: 5px;
padding-left: 15px;
margin-top: 7px;
margin-left: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* background: url("../assets/First_Picker/icon-copy-2.svg") no-repeat; */
background-size: 12px;
background-position: calc(100% - 20px) center;
background-color: white;
background-repeat: no-repeat;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: white;
outline: none;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
line-height: 1.5;
margin-left: 20px;
font-size: 16px;
min-width: 229px;
width: 229px;
border-radius: 0;
padding-left: 15px;
margin-top: 7px;
margin-left: 20px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
#arrow1 {
padding-left: 50px;
width: 5.4px;
height: 8.8px;
/* transform: rotate(-270deg); */
color: #a9a9a9;
}
.dropdown-header {
color: #a9a9a9;
}
.show {
display: block;
}
/*CHECK BOX STYLES*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* width: 102px; */
height: 24px;
font-family: "Open Sans";
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: #272729;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 18px;
width: 18px;
background-color: white;
border: 1px solid grey;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
/* background-color: #283fb0; */
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #283fb0;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: inline-block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 6px;
top: 2px;
width: 6px;
height: 9px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkout_btn {
width: 114px;
margin-top: 6px;
margin-left: 20px;
height: 60px;
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #283fb0;
}
.checkout_txt {
width: 76px;
height: 24px;
font-family: "Open Sans";
font-size: 14px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
<div class="dropdown">
<button class="dropbtn" @click="PickHotel">
{{ hotel_selected ? selected_hotel.name: 'Select Hotel' }}
<i
class="fa fa-chevron-down"
id="arrow1"
></i>
</button>
<div
id="myDropdown3"
v-bind:class="[hotelPicker == true ? 'dropdown-content show' : 'dropdown-content']"
>
<p
class="dropdown-header"
v-if="hotel_selected ==false || hotel_selected==true & roomTypes_selected.length >1"
>Select Hotel</p>
<p class="dropdown-header" v-else>Select a Room Type</p>
<label class="container" v-if="!hotel_selected" v-for="(item,i) in Hotel" :key="i">
{{ item.hotel }}
<input
type="checkbox"
:value="item.hotel"
:name="i"
:id="i"
@input="selectHotel($event.target.value,$event.target.name)"
>
<span class="checkmark"></span>
</label>
<!-- ROOMTYPES -->
<label
class="container"
v-if="hotel_selected"
v-for="rmType in Hotel[selected_hotel ? selected_hotel.id : 0].roomTypes"
:key="rmType.id"
>
{{ rmType.type }}
<input
type="checkbox"
:value="rmType.type"
:name="rmType.id"
:id="rmType.id"
@input="selectRoomType($event.target.value,$event.target.name)"
>
<span class="checkmark"></span>
</label>
</div>
</div>
解决方案
检查此解决方案。我刚刚创建了一个小组件,可以帮助您稍微修改代码。我希望这有帮助。
<template>
<div class="container">
<form>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="form-group">
<select v-model="selectedValue">
<option v-for="(val,key) in formData" :key="key">{{key}}</option>
</select>
</div>
<div class="form-group">
<app-checkbox :childData="selectedChildData"></app-checkbox>
</div>
</div>
</div>
{{selectedChildData}}
</form>
</div>
</template>
<script>
import AppCheckbox from "./AppCheckbox"
export default {
data(){
return {
formData:{
test1:["single","double"],
test2:["sample1","sample2"]
},
selectedValue:"",
selectedChildData:[],
formDataSelected:[]
}
},
watch:{
selectedValue(val){
this.selectedChildData = this.formData[val]
}
},
components:{
"app-checkbox": AppCheckbox
}
}
</script>
<style>
</style>
这是 AppCheckbox 组件的代码
<template>
<div>
<div class="form-group" v-if="customData.length != 0 || customData.length != null" v-for="(val,index) in customData" :key="index">
<input type="checkbox" :value="val" v-model="childSelectedData">{{val}}
</div>
</div>
</template>
<script>
export default {
props:{
childData:Array
},
data(){
return {
childSelectedData:[]
}
},
computed:{
customData:{
get(){
return this.childData;
}
}
}
}
</script>
推荐阅读
- r - 在反应元素中更新私有但不更新 UI
- algorithm - Bellman-Ford 路由算法,怎么会这样呢?
- spring-boot - 你能用列表吗
和@OneToMany 同时在实体中? - r - 将图像上传到 R 闪亮可下载到 pdf
- python - 如何将蓝牙插座连接到安卓手机?
- excel - 如何在 Excel 中映射对象?
- if-statement - 合并两个 IF 时 Google Sheet 输出错误
- javascript - 如果没有箭头函数(常规函数),我将如何重写它
- flutter - 使用 http 从 API 解析数据的问题
- amazon-web-services - 使用 Terraform 时,为什么我在其入/出规则中更改 EC2 实例时,我的 RDS 实例会拆除并重新启动?