我正在尝试创建一个博客存档列表,其中按年份和月份显示所有文章(我是使用 PHP/MySQL 完成的)
现在我正在尝试做到这一点,以便在页面加载时,除最近的年份/月份之外的所有年份都会折叠,并且每个年份都会在点击时折叠/展开。
目前,我的 jQuery 单击函数将打开或关闭所有 li 元素,而不仅仅是我单击的元素。我对 jQuery 还很陌生,所以不确定如何让它只影响我单击的列表部分。
任何帮助都会很大!
这是到目前为止我的代码(该列表是从 PHP/MySQL 循环生成的)
<ul class="archive_year">
<li id="years">2012</li>
<ul class="archive_month">
<li id="months">September</li>
<ul class="archive_posts">
<li id="posts">Product Review</li>
<li id="posts">UK men forgotten how to act like Gentlemen</li>
<li id="posts">What Do Mormons Believe? Ex-Mormon Speaks Out</li>
<li id="posts">Here is a new post with lots of text and a long title</li>
</ul>
<li id="months">August</li>
<ul class="archive_posts">
<li id="posts">A blog post with an image!</li>
</ul>
</ul>
<li id="years">2011</li>
<ul class="archive_month">
<li id="months">July</li>
<ul class="archive_posts">
<li id="posts">New Blog!</li>
</ul>
</ul>
<li id="years">2009</li>
<ul class="archive_month">
<li id="months">January</li>
<ul class="archive_posts">
<li id="posts">Photography 101</li>
</ul>
</ul>
</ul>
这是到目前为止的 jQuery:
$(document).ready(function() {
//$(".archive_month ul:gt(0)").hide();
$('.archive_month ul').hide();
$('.archive_year > li').click(function() {
$(this).parent().find('ul').slideToggle();
});
$('.archive_month > li').click(function() {
$(this).parent().find('ul').slideToggle();
});
});
我正在尝试 $(".archive_month ul:gt(0)").hide();但它没有按预期工作,它会切换打开和关闭。
有什么帮助/想法吗?
另外,这是一个活生生的例子:http://jsfiddle.net/MrLuke/VNkM2/1/
最佳答案
首先关于问题:
- ID 必须是唯一的!
- 您必须正确嵌套
<li>
-s
以下是解决问题的方法 - DEMO
jQuery
$('.archive_month ul').hide();
$('.months').click(function() {
$(this).find('ul').slideToggle();
});
HTML (已修复)
<ul class="archive_year">
<li class="years">2012
<ul class="archive_month">
<li class="months">September
<ul class="archive_posts">
<li class="posts">Article 1</li>
<li class="posts">Article 2</li>
<li class="posts">Article 3</li>
<li class="posts">Article 4</li>
</ul>
</li>
<li class="months">August
<ul class="archive_posts">
<li class="posts">Article 1</li>
</ul>
</li>
</ul>
</li>
<li class="years">2011</li>
<ul class="archive_month">
<li class="months">July
<ul class="archive_posts">
<li class="posts">Article 1</li>
</ul>
</li>
</ul>
</li>
<li class="years">2009</li>
<ul class="archive_month">
<li class="months">January
<ul class="archive_posts">
<li class="posts">Article 1</li>
</ul>
</li>
</ul>
</ul>
关于jquery - 使用 jQuery 展开/折叠 ul 列表 - 遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12480838/