Question

我已经学习了几个星期的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>消失。

谢谢：）

Answer 1

将点击绑定到<li>，而不是<ul>
在点击处理程序中使用this来引用所点击的特定<li>。
一旦隐藏了.remove()，您可能希望<li>。
如果<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();
        });
      }
    });
  });
});

Answer 2

你在找类似的东西吗？（原谅任何语法错误 - 袖口稍微偏离）

$('.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(); 
    }
});

Answer 3

click_hide类位于列表对象上 - 因此您的单击处理程序实际上是引用它。因此this会引用ul而不是li。

首先，选择li，为.click_hide 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对象的约定。）

jQuery隐藏个人通知

3 个答案: