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的方法)

  • 相关阅读:
    178
    177
    176
    175
    To Do List
    洛谷 P4198 楼房重建
    斯特林数
    容斥原理
    组合数学笔记
    激光相机数据融合(6)--激光相机标定
  • 原文地址:https://www.cnblogs.com/zc290987034/p/9144062.html
Copyright © 2011-2022 走看看