zoukankan      html  css  js  c++  java
  • jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css

           .bl_rencai_32{
                    float: left;
                    height: 35px;
                    line-height: 35px;
                }
                .bl_rencai_32 >input{
                    width: 30px;
                    height: 18px;
                    padding: 0px 5px;
                    margin-top: -3px;
                }
                .bl_rencai_32 a{
                    display: none;
                    background-color: #FF6600;
                    text-align: center;
                    padding: 3px 8px;
                    color: #fff;
                    border-radius: 3px;
                    margin-left: 10px;
                }
                .bl_rencai_32 a:hover{
                    background-color: #ff552e;
                }

    html

                  <div class="bl_rencai_32">
    				<input type="text" name="" value="">
    				<span>-</span>
    				<input type="text" name="" value="">
    				<span>岁</span>
    				<a href="" class="bl_rencai_32_ashow">筛选</a>
    			</div>
    

      

    jq

    /*输入年龄段 点击显示 筛选按钮 并 点击其他地方时筛选按钮隐藏*/
            $('.bl_rencai_32 input').on('click',function(e){
                $('.bl_rencai_32_ashow').show();
                $(document).one('click',function(){
                    $('.bl_rencai_32_ashow').hide();
                })
                e.stopPropagation();/*stopPropagation();方法可以阻止把事件分派到其他节点*/
            })

    借鉴网址:https://blog.csdn.net/YangBingX/article/details/78644486  (他的这里面有原生JS的方法)

  • 相关阅读:
    静下来好好学习
    深入学习Redis主从复制
    深入学习Redis持久化
    TPS、并发用户数、吞吐量关系
    P1067 多项式输出
    P1014 Cantor表
    P2089 烤鸡
    P1579 哥德巴赫猜想(升级版)
    P1217 [USACO1.5]回文质数 Prime Palindromes
    校内比赛 城市交通费
  • 原文地址:https://www.cnblogs.com/zc290987034/p/9144062.html
Copyright © 2011-2022 走看看