树形单选框input_radio菜单

柔光的暖阳◎ 2023-02-22 12:29 20阅读 0赞

效果图  
![在这里插入图片描述][2020070317004031.png]  
![在这里插入图片描述][20200703173843737.gif]

需要引用到jquery

##### html部分 #####

##### css部分 #####

.menuTree { 
        margin-left: 0px;
    
    }
    
    .menuTree label { 
        padding-left: 1px;
        display: block;
    
    }
    
    .menuTree input[type="radio"]{ 
        width: 18px;
        height: 16px;
        appearance: none;
        position: relative;
        vertical-align: text-bottom;
    }
    .menuTree input[type="radio"]:before{ 
        content: '';
        width: 18px;
        height: 18px;
        border: 1px solid #2D92FF;
        background-color: #fff;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
        margin-top: -4px;
    }
    .menuTree input[type="radio"]:checked:before{ 
        content: '';
        width: 18px;
        height: 18px;
        border: 1px solid #2D92FF;
        background:#2D92FF;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
        margin-top: -4px;
    }
    .menuTree input[type="radio"]:checked:after{ 
        content: '';
        width: 10px;
        height: 5px;
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 5px;
        left: 4px;
        vertical-align: middle;
        transform: rotate(-45deg);
    }
    .menuTree input[type="radio"]:checked+label{ 
        color: #2D92FF;
    }
    .menuTree label ul { 
        overflow: hidden;
        display: none;
        height: auto;
        margin: 0;
        padding-left: 40px !important;
    }
    
    .menuTree span { 
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
        margin: 1px 0;
        cursor: pointer;
    }
    
    .menuTree span:hover { 
        background-color: #e6e6e6;
        color: #FF1A36;
    }

#### js 部分 ####

[2020070317004031.png]: https://img-blog.csdnimg.cn/2020070317004031.png
[20200703173843737.gif]: https://img-blog.csdnimg.cn/20200703173843737.gif