我有以下jQuery和
HTML,当输入的焦点丢失时隐藏搜索结果.
当点击#searchResult上的元素时,此代码用id #searchResult隐藏我的div.我想在单击#searchResult div上的元素时禁用模糊.基本上,我想隐藏< div id =“searchResult”>当焦点丢失并显示焦点时.我怎样才能做到这一点?
$(document).on("blur","#txtSearchTerm",function () { $('#searchResult').hide(); }); $(document).on("focus",function () { $('#searchResult').show(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="txtSearchTerm" type="text"> <div id="searchResult"> <ul> <li> <a href="http://www.google.com"> <div class="title">Google.com</div> <div class="content">Click here</div> </a> </li> <li> <a href="http://www.google.com"> <div class="title">Google.com</div> <div class="content">Click here</div> </a> </li> </ul> </div>
< div id =“searchResult”>将在每次点击其中的元素时隐藏.
解决方法
你不需要模糊事件来实现这一目标:
$(document).click(function(e) { if ($(e.target).is("div") && $(e.target).has("ul > li")){ $('#searchResult').show() } else $('#searchResult').hide() if ($(e.target).is(':focus')){ $('#searchResult').show() } })
#searchResult{ margin-top: 50px; border: 2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="txtSearchTerm" type="text"> Click out the input to hide div <div id="searchResult"> <ul> <li> <a href="http://www.google.com"> <div class="title">Google.com</div> <div class="content">click here</div> </a> </li> <li> <a href="http://www.google.com"> <div class="title">Google.com</div> <div class="content">click here</div> </a> </li> </ul> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。