解决tab选择年月日

问题:

当点击2013时未选中以及展开栏没有收起来

解决：

添加到年月到input的方法不仅要在月份中调用，还要在年份中调用，这样就不会有上述问题了

贴此demo代码

html:

		<dl id="person">
            <!-- 宝宝生日 -->
            <dd>
                <s>宝宝生日</s>
                <div id="age" name="age" class="input" @click="openBadyBrithy">{{currValArr}}</div>
            </dd>
            <div id="stage">
                <dl>
                    <dt>选择宝宝生日</dt>
                    <dd>
                        <h4>年份</h4>
                        <ul id="yearset" @click="clickBadyBirthey">
                            <li data-year="2012">2012</li>
                            <li data-year="2013">2013</li>
                            <li data-year="2014">2014</li>
                            <li data-year="2015">2015</li>
                            <li data-year="2016">2016</li>
                            <li data-year="2017">2017</li>
                            <li data-year="2018">2018</li>
                            <li data-year="2019">2019</li>
                        </ul>
                        <h4>月份</h4>
                        <ul id="monthset" @click="clickBadyMonth">
                            <li data-month="01">01</li>
                            <li data-month="02">02</li>
                            <li data-month="03">03</li>
                            <li data-month="04">04</li>
                            <li data-month="05">05</li>
                            <li data-month="06">06</li>
                            <li data-month="07">07</li>
                            <li data-month="08">08</li>
                            <li data-month="09">09</li>
                            <li data-month="10">10</li>
                            <li data-month="11">11</li>
                            <li data-month="12">12</li>
                        </ul>
                    </dd>
                </dl>
            </div>
        </dl>

css:

/* 外部盒子*/

#person {
width: 98%;
height: auto;
margin: 0 auto;
}
#person dd {
position: relative;
margin-bottom:10px;
}
#person dd s {
position: absolute;
height: 30px;
line-height: 30px;
font-style: normal;
color: #999;
top: 13px;
left: 8px;
font-size: 18px;
border-right: 1px solid #999;
text-align: center;
display: block;
width: 85px;
text-decoration: none;
}
.input {
border: 1px solid #ddd;
color: #333;
font-size: 18px;
height: 40px;
line-height: 40px;
width: 100%;
/* padding: 5px; */
overflow: hidden;
text-indent: 100px;
text-align: left;
background: #fff;
-webkit-appearance: none;
border-radius: 20px;
margin-bottom: 0;
}

/* 宝宝生日 */

#stage {
width: 99%;
height: 300px;
border: 1px solid #eee;
background: #fff;
display: none;
border-bottom: 2px solid #e53d7b;
}
#stage dt {
height: 40px;
line-height: 40px;
color: #333;
padding-left: 5px;
text-align: left;
font-style: normal;
font-size: 18px;
}
#stage dd {
height: 540px;
padding: 5px 10px 10px;
}
#stage h4 {
line-height: 30px;
height: 30px;
display: inline-block;
margin:0 auto 60px auto;
}
#stage ul {
width: 85%;
clear: both;
height: 60px;
float: right;
}
#stage ul li {
width: 20%;
text-align: center;
height:25px;
line-height: 25px;
margin: 2% 2%;
float: left;
border-radius: 17px;
border: 1px solid #999;
/* font-size: 32px; */
}
#stage ul li.c {
background: #e53d7b;
color: #fff;
}

js:

export default {
data () {
return {
year:’’,
month:’’,
// 宝宝年月
currValArr:’’,
}
},
components: {
BeeHeader,
BeeFooter
},
// 点击按钮显示对应的图片
methods: {
// -------------------------------
// 宝宝年份
clickBadyBirthey (e) {
let dom = e.target
var index = $(dom).index();
$("#yearset").find(“li”).eq(index).addClass(‘c’).siblings(‘li’).removeClass(‘c’);
this.year = dom.getAttribute(‘data-year’);
},
// 宝宝月份
clickBadyMonth (e) {
let dom = e.target
var index = $(dom).index();
$("#monthset").find(“li”).eq(index).addClass(‘c’).siblings(‘li’).removeClass(‘c’);
this.month = dom.getAttribute(‘data-month’);
// 在选择了月就隐藏宝宝生日列表
this.yearMonth();
// $("#stage").hide();
},
// 添加年月到input中
yearMonth () {
if(this.year!=’’&&this.month!=’’) {
this.currValArr = this.year+’/’+this.month;
$("#stage").hide();
// console.log(this.currValArr);
}
},
// 显示宝宝生日列表
openBadyBrithy () {
$("#stage").toggle();
},
// ---------------------------------

}

==========================0-0完结#o#------------------------------