文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在表单输入焦点上，显示div。为多个输入和隐藏的div在模糊上隐藏div

问在表单输入焦点上，显示div。为多个输入和隐藏的div在模糊上隐藏div
EN

Stack Overflow用户
提问于 2019-01-24 01:42:35
回答 1查看 867关注 0票数 0

我有两个文本输入字段，每个字段都有一个隐藏的div。当客户端在每个文本字段中聚焦时，隐藏的div就会出现。如果客户机单击/聚焦在任何地方，但是文本字段或相关的div，它们都会消失(一次只有一个隐藏的div是可见的)。

我找到了一个working example snippet for a single text field input，但我不知道如何为两个独立的输入/div调整脚本。

1)“搜索市场”中的焦点显示“选择市场”div (黑暗区域单击将关闭/隐藏div)。

​

2)“搜索符号”中的焦点显示“选择符号”div (黑暗区域单击将关闭/隐藏div)。

​

​

代码语言：javascript
复制
//BASED OFF SO SINGULAR EXAMPLE
//https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat#answer-2427363


$('#search-markets').focus(function() {
    $('div.select-filters').css('display', 'flex');
    $(document).bind('focusin.select-filters click.select-filters',function(e) {
        if ($(e.target).closest('.select-filters, #search-markets').length) return;
        $(document).unbind('.select-filters');
        $('div.select-filters').slideUp(300);
    });
});
$('div.select-filters').hide();
代码语言：javascript
复制
#select-data-inputs {
    background-color: #000;
}

.select-filters {
    background-color: rgba(0, 0, 0, 0.8);
    border-top: 2px solid #fff;
    color: #fff;
}

#select-symbols {
    background-color: rgba(1, 56, 89, 0.85);
}

#select-markets {
    background-color: rgba(2, 104, 165, 0.85);
}

.filter-list li.list-inline-item {
    width: 48%;
    margin: 0;
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



    <div class="container-fluid">
        <div class="row m-5 ">
            <div class="col-12 text-center">
                <h1>On form inputs focus, show div. hide div on blur for <span class="text-danger">multiple inputs</span> and hidden divs</h1>
                <p class="lead"><i><a href="https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat" target="_blank">Based from SO sigular example</a></i></p>
            </div>
        </div>
        
        
        <div class="row">
            <!--TEXT FIELDS INPUT ROW-->
            <!--TEXT FIELDS INPUT ROW-->
            <div id="select-data-inputs" class="controls form-row p-3 w-100">
                <div class="col-4">
                    <input type="text" id="search-markets" class="input form-control" placeholder="Search Markets">
                </div>
                <div class="col-4 offset-1">
                    <input type="text" id="search-symbols" class="input form-control" placeholder="Search Symbols">
                </div>
            </div>
        </div>
        <div id="main-display">
            <!--HIDDEN DIV FOR FIRST TEXT FIELD-->
            <!--HIDDEN DIV FOR FIRST TEXT FIELD-->
            <div id="select-markets" class="row select-filters p-4">
                <div class="select-heading col-12 pl-2">
                    <h6 class="small-sub-heading">Select markets</h6>
                </div>
                <div class="col-4 pt-2 select-filter-items">
                    <ul class="filter-list list-unstyled pl-2">
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-1" value="market-option-1">
                            <label class="form-check-label" for="market-option-1">Market Option 1</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-2" value="market-option-2">
                            <label class="form-check-label" for="market-option-2">Market Option 2</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-3" value="market-option-3">
                            <label class="form-check-label" for="market-option-3">Market-Option 3</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-4" value="market-option-4">
                            <label class="form-check-label" for="market-option-4">Market-Option 4</label>
                        </li>
                    </ul>
                </div>
            </div>
            <!--HIDDEN DIV FOR SECOND TEXT FIELD-->
            <!--HIDDEN DIV FOR SECOND TEXT FIELD-->
            <div id="select-symbols" class="row select-filters p-4">
                <div class="select-heading col-4 offset-5 pl-2">
                    <h6 class="small-sub-heading">Select symbols</h6>
                </div>
                <div class="col-4 offset-5 pt-2 select-filter-items">
                    <ul class="filter-list list-unstyled pl-2">
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-1" value="symbol-option-1">
                            <label class="form-check-label" for="symbol-option-1">Symbol Option 1</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-2" value="symbol-option-2">
                            <label class="form-check-label" for="symbol-option-2">Symbol Option 2</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-3" value="symbol-option-3">
                            <label class="form-check-label" for="symbol-option-3">Symbol Option 3</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-4" value="symbol-option-4">
                            <label class="form-check-label" for="symbol-option-4">Symbol Option 4</label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>

​

jquery
input
focus
hidden
blur
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-24 01:58:09

我想这就是你想要的：

​

代码语言：javascript
复制
//BASED OFF SO SINGULAR EXAMPLE
//https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat#answer-2427363


$('#search-markets').focus(function() {
    $('div.select-filters.market').css('display', 'flex');
    $(document).bind('focusin.select-filters.market click.select-filters.market',function(e) {
        if ($(e.target).closest('.select-filters.market, #search-markets').length) return;
        $(document).unbind('.select-filters.market');
        $('div.select-filters.market').slideUp(300);
    });
});

$('#search-symbols').focus(function() {
    $('div.select-filters.symbol').css('display', 'flex');
    $(document).bind('focusin.select-filters.symbol click.select-filters.symbol',function(e) {
        if ($(e.target).closest('.select-filters.symbol, #search-symbols').length) return;
        $(document).unbind('.select-filters.symbol');
        $('div.select-filters.symbol').slideUp(300);
    });
});
$('div.select-filters').hide();
代码语言：javascript
复制
#select-data-inputs {
    background-color: #000;
}

.select-filters {
    background-color: rgba(0, 0, 0, 0.8);
    border-top: 2px solid #fff;
    color: #fff;
}

#select-symbols {
    background-color: rgba(1, 56, 89, 0.85);
}

#select-markets {
    background-color: rgba(2, 104, 165, 0.85);
}

.filter-list li.list-inline-item {
    width: 48%;
    margin: 0;
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



    <div class="container-fluid">
        <div class="row m-5 ">
            <div class="col-12 text-center">
                <h1>On form inputs focus, show div. hide div on blur for <span class="text-danger">multiple inputs</span> and hidden divs</h1>
                <p class="lead"><i><a href="https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat" target="_blank">Based from SO sigular example</a></i></p>
            </div>
        </div>
        
        
        <div class="row">
            <!--TEXT FIELDS INPUT ROW-->
            <!--TEXT FIELDS INPUT ROW-->
            <div id="select-data-inputs" class="controls form-row p-3 w-100">
                <div class="col-4">
                    <input type="text" id="search-markets" class="input form-control" placeholder="Search Markets">
                </div>
                <div class="col-4 offset-1">
                    <input type="text" id="search-symbols" class="input form-control" placeholder="Search Symbols">
                </div>
            </div>
        </div>
        <div id="main-display">
            <!--HIDDEN DIV FOR FIRST TEXT FIELD-->
            <!--HIDDEN DIV FOR FIRST TEXT FIELD-->
            <div id="select-markets" class="row select-filters market p-4">
                <div class="select-heading col-12 pl-2">
                    <h6 class="small-sub-heading">Select markets</h6>
                </div>
                <div class="col-4 pt-2 select-filter-items">
                    <ul class="filter-list list-unstyled pl-2">
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-1" value="market-option-1">
                            <label class="form-check-label" for="market-option-1">Market Option 1</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-2" value="market-option-2">
                            <label class="form-check-label" for="market-option-2">Market Option 2</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-3" value="market-option-3">
                            <label class="form-check-label" for="market-option-3">Market-Option 3</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="market-option-4" value="market-option-4">
                            <label class="form-check-label" for="market-option-4">Market-Option 4</label>
                        </li>
                    </ul>
                </div>
            </div>
            <!--HIDDEN DIV FOR SECOND TEXT FIELD-->
            <!--HIDDEN DIV FOR SECOND TEXT FIELD-->
            <div id="select-symbols" class="row select-filters symbol p-4">
                <div class="select-heading col-4 offset-5 pl-2">
                    <h6 class="small-sub-heading">Select symbols</h6>
                </div>
                <div class="col-4 offset-5 pt-2 select-filter-items">
                    <ul class="filter-list list-unstyled pl-2">
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-1" value="symbol-option-1">
                            <label class="form-check-label" for="symbol-option-1">Symbol Option 1</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-2" value="symbol-option-2">
                            <label class="form-check-label" for="symbol-option-2">Symbol Option 2</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-3" value="symbol-option-3">
                            <label class="form-check-label" for="symbol-option-3">Symbol Option 3</label>
                        </li>
                        <li class="list-inline-item"> 
                            <input class="form-check-input" type="checkbox" id="symbol-option-4" value="symbol-option-4">
                            <label class="form-check-label" for="symbol-option-4">Symbol Option 4</label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>

​

您需要在符号和市场(.select-filters)之间划分类。请注意，我使用添加select-filtersmarket作为市场和select-filterssymbol的符号。

为了分离焦点，您需要使用一个指定的函数，如市场使用div.select-filters.market，符号使用div.select-filters.symbol：

代码语言：javascript
复制
$('#search-markets').focus(function() {
    $('div.select-filters.market').css('display', 'flex');
    $(document).bind('focusin.select-filters.market click.select-filters.market',function(e) {
        if ($(e.target).closest('.select-filters.market, #search-markets').length) return;
        $(document).unbind('.select-filters.market');
        $('div.select-filters.market').slideUp(300);
    });
});

$('#search-symbols').focus(function() {
    $('div.select-filters.symbol').css('display', 'flex');
    $(document).bind('focusin.select-filters.symbol click.select-filters.symbol',function(e) {
        if ($(e.target).closest('.select-filters.symbol, #search-symbols').length) return;
        $(document).unbind('.select-filters.symbol');
        $('div.select-filters.symbol').slideUp(300);
    });
});
$('div.select-filters').hide();
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54338230

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档