Javascript 如何通过单击下拉列表外部隐藏复选框下拉列表

我已经创建了一个示例复选框下拉列表，我面临一个问题，即通过单击下拉菜单外的按钮来隐藏下拉列表。下面是代码

var expanded=false；
函数显示复选框（）{
var复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
扩展=真；
}否则{
复选框.style.display=“无”；
扩展=假；
}
}
$（“#复选框”）。单击（函数（e）{
e、 停止传播（）；
});
$（文档）。单击（函数（）{
$（“#复选框”）.style.display=“无”；
});
.category{
宽度：250px；
}
#复选框{
宽度：250px；
显示：无；
边框：1px#aaa实心；
溢出y：滚动；
背景色：白色；
}
#复选框标签{
显示：块；
}
#复选框标签：悬停{
背景色：#bbb；
}

选择城市
班加罗尔
海得拉巴
德里
孟买
钦奈
帕纳吉
样式是HtmleElement上的属性，在jQuery上不可用。您应该在jQuery对象上使用：

改变

$('#checkboxes').style.display = "none";

到

虽然我更喜欢使用
show（）/hide（）
而不是设置style属性。
您可以将
事件.target.nodeName
检查到
show（）/hide（）
元素

请尝试以下方法：


函数显示复选框（）{
如果（$（“#复选框”）是（“：可见”）{
$（“#复选框”）.hide（）；
}
否则{
$（“#复选框”）.show（）；
}
}
$（文档）。单击（函数（e）{
如果（e.target.nodeName=='BODY'）
$（“#复选框”）.hide（）；
});
.category{
宽度：250px；
}
#复选框{
宽度：250px；
显示：无；
边框：1px#aaa实心；
溢出y：滚动；
背景色：白色；
}
#复选框标签{
显示：块；
}
#复选框标签：悬停{
背景色：#bbb；
}

选择城市
班加罗尔
海得拉巴
德里
孟买
钦奈
帕纳吉
样式是HtmleElement上的属性，在jQuery上不可用。您应该在jQuery对象上使用：

改变

$('#checkboxes').style.display = "none";

到

虽然我更喜欢使用
show（）/hide（）
而不是设置style属性。
您可以将
事件.target.nodeName
检查到
show（）/hide（）
元素

请尝试以下方法：


函数显示复选框（）{
如果（$（“#复选框”）是（“：可见”）{
$（“#复选框”）.hide（）；
}
否则{
$（“#复选框”）.show（）；
}
}
$（文档）。单击（函数（e）{
如果（e.target.nodeName=='BODY'）
$（“#复选框”）.hide（）；
});
.category{
宽度：250px；
}
#复选框{
宽度：250px；
显示：无；
边框：1px#aaa实心；
溢出y：滚动；
背景色：白色；
}
#复选框标签{
显示：块；
}
#复选框标签：悬停{
背景色：#bbb；
}

选择城市
班加罗尔
海得拉巴
德里
孟买
钦奈
帕纳吉
或者，您可以使用jQuery插件作为“此处解释”使用复选框尝试多选下拉列表
或者，您可以使用jQuery插件作为“此处解释”使用复选框尝试多选下拉列表
查看相关帖子查看相关帖子您的下拉列表出现了一些奇怪的情况。单击“打开”下拉列表时，将显示所有城市。如果单击它旁边的，它将关闭。但如果再次单击下拉列表，则没有可用的数据。如果你再点击一次，你的数据就会回来。@Deadsven先生，你是对的，没有注意到……现在修复了……谢谢：）我检查过它现在工作得很好，似乎适用于OP+1向我请求的所有需求。你的下拉列表出现了一些奇怪的情况。单击“打开”下拉列表时，将显示所有城市。如果单击它旁边的，它将关闭。但如果再次单击下拉列表，则没有可用的数据。如果你再次点击它，然后再点击它，你的数据就会回来。@Deadsven先生，你是对的，没有注意到….现在修复….谢谢：）我检查过它现在运行良好，似乎适用于OP+1向我提出的所有需求。虽然这理论上可以回答这个问题，但在这里包括答案的基本部分，并提供链接以供参考。还请注意，OP没有提及或暗示他们正在使用C#或ASP.Net，因此链接本身似乎与问题基本无关，虽然这在理论上可以回答问题，但此处包括答案的基本部分，并提供链接供参考。还要注意，OP没有提到或暗示他们正在使用C#或ASP.Net，因此链接本身似乎与问题无关