gpt4 book ai didi

jquery - 当用户单击正文或下拉菜单外部的任意位置时,下拉菜单关闭

转载 作者:行者123 更新时间:2023-12-01 04:06:49 28 4
gpt4 key购买 nike

JSFiddle Demo

HTML

<input type="text" class="js-search" name="" value="">

<div class="category-list">
<i class="icon-close"></i>
<div class="select-column">
<ul>
<li>
<a class="category-select" href="#">Test1</a>
</li>
<li>
<a class="category-select" href="#">Test2</a>
</li>
<li>
<a class="category-select" href="#">Test3</a>
</li>
</ul>
</div>
</div>

JQuery

var search = $('.js-search');
var menu = $('.category-list');
var close = $('.icon-close');
var category = $('.category-select');
search.on('click', function(e){
e.preventDefault();
menu.fadeIn("normal", function() {
$(this).show();
$(document).click(function(e){
menu.fadeOut("normal", function() {
$(this).hide();
});
});
close.on('click', function(){
menu.fadeOut("normal", function() {
$(this).hide();
});
});
category.on('click', function(){
var el = $(this);
search.val("");
menu.fadeOut("normal", function(){
$(this).hide();
});

search.val(el.text());
});
});
});
$('body').click(function(e) {
if ($(e.target).closest(menu).length === 0) {
menu.fadeOut("normal", function() {
$(this).hide();
});
}
});

还可以使用淡入淡出类来显示或隐藏下拉菜单。剩下的问题是每次单击输入字段时菜单都会继续打开和关闭。在谷歌上查找答案,但徒劳无功。可能忽略了一些缺失的东西。或者代码不对。

感谢帮助!

最佳答案

简化的代码,没有“click处理程序中的click处理程序”。整个想法是打开 <input> 上的下拉菜单单击,放置选定的 <a>文本输入 <input>并在单击除 <input> 之外的任意位置隐藏下拉菜单:

Updated fiddle

$(document).ready(function()
{
var search = $('.js-search');
var menu = $('.category-list');
var category = $('.category-select');

search.on('click', function()
{
menu.fadeIn("normal");
return false;
});

category.on('click', function()
{
search.val($(this).text());
});

$(document).on('click', function()
{
menu.fadeOut("normal");
});
});

关于jquery - 当用户单击正文或下拉菜单外部的任意位置时,下拉菜单关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26505898/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com