DOM 사례 공유 - jQ는 특정 장소를 닫기 위해 아무 곳이나 클릭하는 효과를 실현합니다.

php是最好的语言

풀어 주다： 2018-08-02 10:07:16

원래의

1576명이 탐색했습니다.

Javascript 학습에서 DOM 연습을 통해 jQ는 아무 곳이나 클릭하여 무언가를 닫는 효과를 실현합니다(종종 모달 상자 뒤의 마스크 레이어에서 사용됨)

무언가를 닫으려면 아무 곳이나 클릭하세요

그리고 해당 위치를 클릭하면 자신이 숨겨지지 않습니다

Principle

//点击文档任意处都触发该事件$(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);//显示隐藏
        }
    }
})

로그인 후 복사

효과

DOM 사례 공유 - jQ는 특정 장소를 닫기 위해 아무 곳이나 클릭하는 효과를 실현합니다.

code

html part

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>backspacing</title>
    <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(&#39;敬请期待&#39;)!">理工首页&ensp;|&ensp;</a></li>
    <li><a href="javascript:alert(&#39;敬请期待&#39;)!">收藏本页&ensp;|&ensp;</a></li>
    <li><a href="javascript:alert(&#39;敬请期待&#39;)!">English</a></li></ul><a href="javascript:alert(&#39;敬请期待&#39;)!" class="searchBtn"><img src="search.png" alt=""></a><p class="search">
    <form action="">
        <input type="text" placeholder="请输入相关搜索内容">
        <a href="javascript:alert(&#39;敬请期待&#39;)!"><img src="search.png" alt=""></a>
    </form></p>
    <script src="../jquery.min.js"></script>
    <script src="backspacing.js"></script></body></html>

로그인 후 복사

js part

// 搜索框的出现&&隐藏$(".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;
    }
})

로그인 후 복사