suchen

Heim >Web-Frontend >js-Tutorial >DOM-Fallfreigabe – jQ erkennt den Effekt, wenn man auf eine beliebige Stelle klickt, um eine bestimmte Stelle zu schließen

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

php是最好的语言
php是最好的语言Original
2018-08-02 10:07:161615Durchsuche

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);//显示隐藏
    }
})

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);//显示隐藏
        }
    }
})

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>

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;
    }
})

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-Überprüfungsdatensatz – verschiedene Verwendungsmöglichkeiten der AusgabeNächster Artikel：JavaScript-Überprüfungsdatensatz – verschiedene Verwendungsmöglichkeiten der Ausgabe

In Verbindung stehende Artikel

Mehr sehen