DOM-Fallfreigabe – jQ erkennt den Effekt, wenn man auf eine beliebige Stelle klickt, um eine bestimmte Stelle zu schließen

php是最好的语言

Freigeben： 2018-08-02 10:07:16

Original

1588 Leute haben es durchsucht

JQ ist ein praktischer Kampf gegen DOM beim Javascript-Lernen und erkennt den Effekt, wenn man auf eine beliebige Stelle klickt, um eine bestimmte Stelle zu schließen (häufig in der Maskenebene hinter der Modalbox verwendet)

Klicken Sie auf eine beliebige Stelle. Schließen Sie eine bestimmte Stelle

und klicken Sie auf die entsprechende Stelle, damit sie sich nicht ausblendet.

Prinzip

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

Nach dem Login kopieren

Ich habe in der Praxis einige der folgenden Webseiten herausgenommen Der endgültige Stil kann unterschiedlich sein.
Die Idee ist

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

Nach dem Login kopieren

Effekt

DOM-Fallfreigabe – jQ erkennt den Effekt, wenn man auf eine beliebige Stelle klickt, um eine bestimmte Stelle zu schließen

Code

HTML-Teil

<!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>

Nach dem Login kopieren

JS-Teil

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

Nach dem Login kopieren

Verwandte Artikel:

jQuery erkennt den Effekt des Schließens der Popup-Ebene außerhalb der Popup-Ebene durch Klicken auf eine beliebige Stelle

JavaScript klicken Sie auf die Webseite. Implementierungscode zum Öffnen neuer Fenster und Schließen von Fenstern an beliebiger Stelle

Verwandte Videos:

Detaillierte Erläuterung der Grundlagen von DOM Erkundung

Das obige ist der detaillierte Inhalt vonDOM-Fallfreigabe – jQ erkennt den Effekt, wenn man auf eine beliebige Stelle klickt, um eine bestimmte Stelle zu schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!