• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

js-jquery-点击div之外的区域使div隐藏

当前位置：网站建设 > 技术支持

.search-box {
    position: relative;
}

    .search-box .search-select {
        position: absolute;
        margin-top: -2px;
        right: 100px;
    }

.search-select ul {
    display: none;
    cursor:pointer;
    
}

    .search-select ul li:hover {
        background-color:#e9e9e9;
    }

.search-input-text,
.search-btn {
    float: left;
}

.search-input-text {
    width: 80%;
}

<div class="search-box">

                       <input class="search-input-text" type="text" value="" placeholder="请输入关键词" />

                       <div class="search-select">

                           <h6><span class="search-value">全站</span><i class="fa fa-sort-desc fa-1-5x"></i></h6>

                           <ul>

                               <li>源码</li>

                               <li>全站</li>

                           </ul>

                       </div>

                       <a href="javascript:void(0)" class="search-btn">搜索</a>

                   </div>

<script>
            $(function () {
             
                $(".search-select>h6").click(function () {
                    $('.search-select>ul').toggle();
                    $(document).one("click", function () {//对document绑定一个影藏Div方法
                        $('.search-select>ul').hide();
                    });
                    event.stopPropagation();//阻止事件向上冒泡
                });
                $('.search-select>ul>li').click(function () {
                    $('.search-value').html($(this).html());
                });
            });
        </script>

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。