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隱藏個人通知

回答

相關問題