Jquery .css（'opacity'，'0'）不起作用

Question

好的，所以我一直在努力尝试，但不能让它发挥作用。

基本上我有一堆<li>，其中有一个隐藏的<div class="overlay">，如果点击了<li>就会显示。没有问题显示它，但不知何故，我有麻烦使它消失。

Jsfiddle - http://jsfiddle.net/NP5YA/

任何人都可以提供帮助吗？

谢谢！

Answer 1

您需要阻止事件冒泡DOM树以使用event.stopPropagation()：

$('.close').click(function(e) {
    e.stopPropagation();
    $(this).parent().css('opacity','0');
    $(this).parent().css('z-index','-999');
});

Updated Fiddle

Answer 2

您仍在点击您的li并运行您的功能两次。 所以基本上它会消失并再次出现。发生这种情况时我会用它。

$('#selection li').click(function() {
    if($(this).hasClass('clicked')) {
    $(this).removeClass('clicked');
    return;
    }
    $(this).addClass('clicked');
    $(this).find('.overlay').css('opacity','1');
    $(this).find('.overlay').css('z-index','9999');
});

$('.close').click(function() {
    $(this).parent().css('opacity','0');
    $(this).parent().css('z-index','-999');
});