显示隐藏列表元素

时间:2014-06-24 13:39:31

标签: jquery

我有一个动态生成的列表如下:

<ul>
<?php

 $currentYear = null;
 foreach($months as $m => $month){

    if(is_null($currentYear) || $currentYear !== $month->year){
        echo '<li id="year-'.$month->year.'"><strong>' . $month->year . '</strong></li>';
    }

    echo '<li class="'.$month->year.'"><a href="/news?year=' . $month->year . '&month=' . $month->month . '">' . date("M", strtotime($month->year . '-' . $month->month)) . ' (' . $month->total . ')</a></li>';

    $currentYear = $month->year;
}

?>
</ul>

生成HTML,如下所示:

<ul>
 <li><h2>2014</h2></li>
 <li><a href="/news?year=2014&amp;month=6">Jun (2)</a></li>
 <li><a href="/news?year=2014&amp;month=3">Mar (1)</a></li>
 <li><a href="/news?year=2014&amp;month=2">Feb (1)</a></li>
 <li><a href="/news?year=2014&amp;month=1">Jan (2)</a></li>
 <li><h2>2013</h2></li>
 <li><a href="/news?year=2013&amp;month=11">Nov (1)</a></li>
 <li><a href="/news?year=2013&amp;month=10">Oct (2)</a></li>
 <li><a href="/news?year=2013&amp;month=9">Sep (1)</a></li>
 ...
</ul>

我需要最初隐藏的列表项目(li&#39; s),点击2014年标题后,所有属于year = 2014的新闻项目都会显示或显示。所有标题都会发生同样的情况。

1 个答案:

答案 0 :(得分:3)

尝试,

$('ul li:has(a)').hide();

$('ul li :header').click(function(){
  $(this).parent('li').nextUntil('li:has(:header)').toggle();
});

DEMO