【Javascript学习笔记】【DOM实战— —jQ实现点击任意位置关闭某处的效果(常用于模态框后面的遮罩层)】

【Javascript学习笔记】

目录

  • 目录
  • 点击任意位置关闭某处
  • 原理
    • 效果
    • 代码
  • 实战代码
  • 快捷链接

点击任意位置关闭某处

而且点击对应处并不会hide掉自己

原理

//点击文档任意处都触发该事件
$(document).mousedown(function(e){
    //只有当某对象存在时才会有的点击任意处出现的事件效果
    if($(e.target).parents(".search").length==0){
        $("xxx").slideToggle(300);//显示隐藏
    }
})

下列网页实战中我取出部分,因此最后看起来样式可能不相同。
其中思想是

//点击文档任意处都触发该事件
$(document).mousedown(function(e){
    if(想要显示的对象如果是在显示状态时才有以下的触发效果){
        //只有当某对象存在时才会有的点击任意处出现的事件效果
        if($(e.target).parents(".search").length==0){
            $("xxx").slideToggle(300);//显示隐藏
        }
    }
})

效果

【Javascript学习笔记】【DOM实战— —jQ实现点击任意位置关闭某处的效果(常用于模态框后面的遮罩层)】_第1张图片

代码

html部分


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backspacingtitle>
    <style type="text/css"> html{ background: #666; } .topList{ float: right; margin-right: 36px; list-style: none; } .topList li{ float: left; height: 35px; line-height: 35px; text-align: center; } .topList a{ color: #fff; } .topList a:active, .topList a:focus, .topList a:hover{ color: #fff; text-decoration: none; } .searchBtn{ position: absolute; right: 0; top: 3px; width: 35px; height: 35px; } .searchBtn img{ position: absolute; right: 0px; top: 7px; width: 16px; height: 16px; display: block; } .search{ display: none; position: absolute; right: 0; top: 0; width: 190px; height: 35px; } .search input{ position: absolute; right: 0px; top: 0px; width: 100%; height: 31px; border:0; border-bottom: 1px solid #fff; background: #89C997; color: #fff !important; padding-right:30px; } .search input::-webkit-input-placeholder{ color: #fff; } .search input::-moz-placeholder{ color: #fff; } .search input::-ms-input-placeholder{ color: #fff; } .search input::-moz-placeholder{ color: #fff; } .search a{ position: absolute; right: 0px; top: 7px; width: 16px; height: 16px; border-radius: 25px; } .search img{ width: 16px; height: 16px; } style>
head>
<body>
<ul class="topList">
    <li><a href="javascript:alert('敬请期待')!">理工首页 | a>li>
    <li><a href="javascript:alert('敬请期待')!">收藏本页 | a>li>
    <li><a href="javascript:alert('敬请期待')!">Englisha>li>
ul>
<a href="javascript:alert('敬请期待')!" class="searchBtn"><img src="search.png" alt="">a>
<div class="search">
    <form action="">
        <input type="text" placeholder="请输入相关搜索内容">
        <a href="javascript:alert('敬请期待')!"><img src="search.png" alt="">a>
    form>
div>
    <script src="../jquery.min.js">script>
    <script src="backspacing.js">script>
body>
html>

js部分

// 搜索框的出现&&隐藏
$(".searchBtn").click(function(){
    $(".searchBtn").slideToggle(300);
    $(".search").slideToggle(300);
    $(".topList").slideToggle(100);
});
$(document).mousedown(function(e){
    if(!($(".search").is(":hidden"))){
        if($(e.target).parents(".search").length==0){
            $(".searchBtn").slideToggle(300);
            $(".search").slideToggle(300);
            $(".topList").slideToggle(100);
        }
    }else{
        return false;
    }
})

实战代码

github:该实战完整代码下载(PS:backspacing文件) ChilkHere 》

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~

你可能感兴趣的:(前端(js,html,css,less))