gadeget : jQuery实现输入数字生成指定数量二级菜单

去年年初，一个学长说他曾经遇到的面试题（现在不可能这么简单啦），现在发现好简单
jquery真香~

Design：

1. HTML，input.text / button / ul li

2. js 获取input.value值

3. 获取生成按钮，绑定鼠标事件，当时间发生时，生成ul li

4 循环ul value次

HTML

    
    
    
一级菜单
        

        

        

        

        

            
之前的菜单
        
    

---

css

* {
    margin: 0;
    padding: 0;
}
.my{
    width: 100px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: center;
    line-height: 40px;
    margin: 20px 0 0 20px;
}
.top{
    width: 0px;
    height: 1px;
    background: black;
    position: absolute;
    right: 0;
    top: -1px;
}
.bottom{
    width: 0px;
    height: 1px;
    background: black;
    position: absolute;
    left: 0;
    bottom: -1px;
}
.left{
    width: 1px;
    height: 0px;
    background: black;
    position: absolute;
    top: 0;
    left: -1px;
}
.right{
    width: 1px;
    height: 0px;
    background: black;
    position: absolute;
    bottom: 0;
    right: -1px;
}
.next{
    width: 100px;
    position: absolute;
    list-style: none;
    text-align: center;
    line-height: 40px;
    display: none;
}
.next li{
    width: 100px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-top: none;
    overflow: hidden;
}

---

$(function () {
    //一级菜单动画
    $('.my').hover(function () {
        $(this).find('.top,.bottom').stop().animate({ 'width': '101px' }, 1000);
        $(this).find('.left,.right').stop().animate({ 'height': '41px' }, 1000);
        $('.next').stop().hide().fadeIn();
    }, function () {
        $(this).find('.top,.bottom').stop().animate({ 'width': '' }, 1000);
        $(this).find('.left,.right').stop().animate({ 'height': '' }, 1000);
        $('.next').stop().fadeOut();
    })

    //清空按钮
    $('#clean').click(function () {
        $('.next li').remove()
    })
    //生成按钮
    $('#btn').click(function () {
        let vale = $('#txt').val();
        // console.log(vale)
        let tag = '
' + '生成的菜单' + '
';
        let oLi = $('.next li');
        //number判断
        if (isNaN(vale)) {
            alert('请输入数字');
            return;
        }
        //获取val数值，循环
        for (let i = 0; i < vale; i++) {
            $('.next').append($(tag));
        }
    })
})

---

每天积累一点，就会不断进步，永不气馁