Mobile Menu Will Come Here.
隐藏
柏港 Jquery

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

发布：2021/11/16 10:18:19作者：管理员 来源：本站 浏览次数：893

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


　vuejs绑定数据到select中，选择option数据后，同步改变下面一个输入框input的值
C#分词SQL算法　

柏港为您推荐了一些相关资讯

js-jquery-点击div之外的区域使div隐藏 js实现的点击div区域外隐藏div区域 JQuery实现点击div以外的位置隐藏该div窗口

© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4