單擊對象，並顯示其他 - 簡單的jQuery片斷

Question

我有一個簡單的點擊和展示片斷這需要一點修改的。我努力的行爲是當我點擊另一個LI元素時，從其他LI對象中隱藏其他灰色框。另外，當我點擊文檔正文（例如> UL容器外）時，我需要它隱藏所有的灰色框。

下面是一些示例代碼：

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

這裏是我具有有點麻煩達到所期望的效果的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'); 
    });