jQuery隐藏个人通知

我一直在学习jQuery几个星期，并遇到了一个我无法弄清楚的任务。jQuery隐藏个人通知

我一直在处理客户端管理控制面板，并已实施通知，出现在用于各种原因的页面顶部。

我已经设法到目前为止做的就是在div点击隐藏它：

$(document).ready(function() { 
    $('.click_hide').click(function() { 
    $('.click_hide').slideUp('slow', function() { 
    // Animation complete. 
    }); 
    }); 
}); 

<ul class="system_messages click_hide"> 
    <li class="blue"><span class="ico"></span><strong class="system_title">There have been 17 new cases since your last login.</strong></li> 
    <li class="blue"><span class="ico"></span><strong class="system_title">There have been 17 new cases since your last login.</strong></li> 
</ul>

我想做什么就能做虽然是能够单独隐藏的通知（<li class="click_hide">...</li>），当<ul>...</ul>没有任何消失。

谢谢:)

来源

2011-01-05 lethalMango

绑定点击到<li> S，不是<ul>
使用this单击处理中指被点击的具体<li>。
您可能想要.remove()<li> s一旦被隐藏。
如果不包含任何子女，请隐藏<ul>。

JS：

$(document).ready(function() { 
    $('ul.click_hide > li').click(function() { 
    var li = $(this).slideUp('slow', function() { 
     // Animation complete 
     var ul = $('ul.click_hide'); 

     // Remove li 
     li.remove(); 

     // Hide ul? 
     if (ul.children().length === 0) { 
     ul.slideUp('slow', function() { 
      // Remove ul 
      ul.remove(); 
     }); 
     } 
    }); 
    }); 
});

来源

2011-01-05 15:10:13

一切正常，但UL似乎并没有再次滑向顶端，或者至少剩下的内容不会回到插入ul之前的顶端。 – lethalMango 2011-01-05 15:26:33

您正在寻找类似这样的东西吗？（请原谅任何语法错误 - 有点即兴）

$('.blue').click(function() { 
    //Hides the individual notification 
    $(this).hide(); 
    //Hides the ul if no additional notifications are present 
    if($('.system_messages').size() == 0) 
    { 
     $('.system_messages').hide(); 
    } 
});

来源

2011-01-05 15:13:50

的click_hide类是列表对象 - 所以你的点击处理程序实际上是引用该。所以this将参考ul而不是li。

首先，通过选择.click_hide li来设置li的点击处理程序。然后使用remove()从DOM中删除该元素，并检查列表中还有多少个列表项。

$('.click_hide li').click(function() { 
    var list = $("ul.system_messages"), 
     $this = $(this); 

    $this.slideUp('slow', function() { 
     $this.remove(); 
     if (!list.children().length) list.remove(); 
    }); 
});

看到它的工作：http://jsfiddle.net/jonathon/tmL7m/

我之所以$this = $(this)是因为我想引用同一个jQuery对象几次，这节省了重新创建它。 $list也是如此（以$为前缀的变量只是一个约定，表示它是jQuery对象）。

来源

2011-01-05 15:18:48

jQuery隐藏个人通知

回答

相关问题