Question

我有一个简单的点击和显示片段，需要进行一些修改。我正在努力的行为是当我点击另一个LI元素时，隐藏其他LI对象的其他灰色框。此外，当我点击文档正文时（例如＆gt;在UL容器外），我需要它隐藏所有灰色框。

以下是一些示例代码：

Table.insert
  .value(_.name, "test")
  .consistencyLevel_=(ConsistencyLevel.Quorum)

这是fiddle.

我有点麻烦达到预期的效果。我怎样才能做到这一点？

提前致谢！

Answer 1

请看一下更新的小提琴：

https://jsfiddle.net/xvopdkf8/4/

您错过了id UL元素作为<ul id="serviceList">

修改后的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();
});

Answer 2

您可以使用此代码：

$('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

Answer 3

修改你的JS工作

$('.openModal').on('click', function (e) {
    $(this).parent().find('.modal.active').toggleClass('active');// or use removeClass
    e.preventDefault();
    $(this).find('.modal').toggleClass('active');
});

注意：我假设列表元素容器有模态

Answer 4

你可以试试这个：

$('.openModal').on('click', function (e) {
        $('ul li').find('.modal.active').removeClass('active');
        e.preventDefault();
        $(this).find('.modal').toggleClass('active');
    });

单击一个对象并显示另一个 - 简单的jQuery代码段

4 个答案: