Maison > Article > interface Web > Partage de cas DOM : jQ réalise l'effet de cliquer n'importe où pour fermer un certain endroit

Partage de cas DOM : jQ réalise l'effet de cliquer n'importe où pour fermer un certain endroit

php是最好的语言original: 2018-08-02 10:07:161539parcourir

Combat pratique du DOM dans l'apprentissage Javascript, jQ réalise l'effet de cliquer n'importe où pour fermer un certain endroit (souvent utilisé dans le calque de masque derrière la boîte modale)

Cliquez n'importe où Fermez un certain endroit

et cliquez sur l'endroit correspondant ne vous cachera pas

Principe

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

J'ai supprimé certaines des pages Web suivantes en pratique, donc le style final peut ne pas être le même.
L'idée est

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

Effet

Partage de cas DOM : jQ réalise leffet de cliquer nimporte où pour fermer un certain endroit

Code

partie html

<!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 Une partie de

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

Articles Liés

Voir plus