zoukankan      html  css  js  c++  java
  • js hover 下拉框

        <div class="box">
                <div class="a f">111111</div>
                <div class="a-box">
                    <div class="b d">111111</div>
                    <div class="b">222222</div>
                    <div class="b">333333</div>
                </div>
            </div>
        .box {
                    width: 100px;
                }
                
                .a,
                .b {
                    width: 200px;
                    height: 30px;
                    background: red;
                    /*border: 1px solid #000;*/
                }
                
                .a.f:after {
                    content: url(x-.g.png);
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                }
                
                .a-box {
                    display: none;
                }
                
                .a:after {
                    content: url(d-g.png);
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                }
                /*.b:after {
                content: url(x-.g.png);
                 10px;
                height: 10px;
                display: inline-block;
              }*/
                
                .d {
                    display: none;
                }
    $(function() {
                    $('.box').on('mouseenter', function() {
                        $('.a-box').css('display', 'block');
                        $(".a").removeClass('f');
                    })
                    $('.box').on('mouseleave', function() {
                        $('.a-box').css('display', 'none');
                        $(".a").addClass('f');
                    })
                    $('.box').on('click', '.a', function() {
                        $('.a-box').css('display', 'none');
                        $(".a").addClass('f');
                    })
                    $('.a-box').on('click', '.b', function() {
                        $('.d').removeClass('d');
                        $(this).addClass('d');
                        $('.a').remove();
                        $('.box').prepend($(this).clone().attr('class', 'a f'));
                        $('.a-box').css('display', 'none');
                    })
                })

    类名为了方便随便命名的,当然开发过程中不允许这样命名,为了大家看的明白一些

  • 相关阅读:
    spring aop
    Linux进程管理命令
    逻辑卷管理-LVM(Logical Volume Manager)
    Linux磁盘与文件系统管理(二)
    Linux磁盘与文件系统管理(一)
    Linux后台运行和关闭、查看后台任务
    Linux用户管理及用户信息查询
    文件备份与压缩
    Liunx信息显示与文件搜索
    文本处理三剑客之 awk
  • 原文地址:https://www.cnblogs.com/chen527/p/9591818.html
Copyright © 2011-2022 走看看