jq 点击按钮显示div,点击页面其他任何地方隐藏div

Posted 遇事稳坐钓鱼台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的方法)

以上是关于jq 点击按钮显示div,点击页面其他任何地方隐藏div的主要内容,如果未能解决你的问题,请参考以下文章

js 点击一个按钮出现一个div然后在点击div以外的任何地方在让div隐藏怎么写

vue点击其他地方隐藏div

一个弹出div,当点击页面上除了这个div这外的地方,隐藏这个div,jquery怎么写??

js隐藏div

AngularJS中怎样实现点击页面的任意地方隐藏指定div

只点击空白处才隐藏div的方法