带有可折叠子元素的html复选框选择列表

Question

我正在使用Vue.js和HTML，SCSS创建网站，并且需要创建类似于以下gif的下拉列表

以上gif显示了当选择旅馆时下拉菜单应如何运作，下拉菜单应显示该旅馆内可用的房型。

我已经使用HTML和v-if版本创建了上面的示例。但是代码很庞大且有bug，是否有提供类似下拉菜单的软件包或示例。有人可以为此建议我吗？

预先感谢...

我的代码

.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>

Answer 1

签出此解决方案。我刚刚创建了一个小组件，可以帮助您稍微修改一下代码。我希望这会有所帮助。

 <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>