单击一个对象并显示另一个简单的jQuery片段

Click an object and show another - simple jQuery snippet

本文关键字：jQuery 片段 简单 另一个 一个对象 显示 单击      更新时间：2023-09-26

我有一个简单的点击和显示片段，需要一点修改。我所追求的行为是当我单击另一个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元素

修改后的JS代码如下: 
$('.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

相关文章：