我有一个简单的点击和显示片段,需要一点修改。我所追求的行为是当我单击另一个LI元素时,对其他LI对象隐藏其他灰框。此外,我需要它隐藏所有的灰色框,当我点击文档的主体(例如>在UL容器外)。
下面是一些示例代码:$('.openModal').on('click', function (e) {
$('#serviceList').find('.modal.active').removeClass('active');
e.preventDefault();
$(this).find('.modal').toggleClass('active');
});
这是小提琴
要达到预期的效果,我遇到了一点麻烦。我怎样才能做到这一点呢?
提前感谢!
请查看更新的小提琴:
https://jsfiddle.net/xvopdkf8/4/您错过了将id
作为<ul id="serviceList">
赋给UL
元素
$('.openModal').on('click', function (e) {
$('#serviceList').find('.modal.active').removeClass('active');
e.preventDefault();
$(this).find('.modal').toggleClass('active');
});
$(document).on('click', function (e) {
var $target = $(e.target);
if($target.closest("#serviceList").length == 0)
{
e.preventDefault();
$('#serviceList').find('.modal.active').removeClass('active');
}
else
e.preventDefault();
});
你可以试试:
$('.openModal').on('click', function (e) {
$('ul li').find('.modal.active').removeClass('active');
e.preventDefault();
$(this).find('.modal').toggleClass('active');
});
修改你的JS it Works
$('.openModal').on('click', function (e) {
$(this).parent().find('.modal.active').toggleClass('active');// or use removeClass
e.preventDefault();
$(this).find('.modal').toggleClass('active');
});
注意:我假设list元素容器有模态
您可以使用以下代码:
$('html').on('click', function (e) {
e.preventDefault();
$('.modal').removeClass('active');
});
$('.openModal').on('click', function (e) {
event.stopPropagation();
$('.modal').removeClass('active');
e.preventDefault();
$(this).find('.modal').toggleClass('active');
});`
jsfiddle