vue点击其他地方隐藏div

Posted 2023-04-09

参考技术A 给最外层元素加上点击事件

给点击出现的盒子的添加点击事件,记得加.stop,阻止冒泡

给自身盒子

如果是嵌套路由，给嵌套的最外层的添加点击事件

如果不需要兼容ie，可以用，contains不兼容ie

可以判断当前点击的是否是需要隐藏盒子的class

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