我有一个包含一年中12个月的定义列表。我有3个月的时间,例如(1月,2月,3月)。我的目标是让列表进入下一个月点击最后一个孩子。例如,当单击March时,将显示April,并且1月将消失显示(2月,3月和4月),依此类推。
这是我的HTML
<div id="archive" class="archive">
<div>Archive</div>
<dl>
<dt>January</dt>
<dt>February</dt>
<dt>March</dt>
<dt>April</dt>
<dt>May</dt>
<dt>June</dt>
<dt>July</dt>
<dt>August</dt>
<dt>September</dt>
<dt>October</dt>
<dt>November</dt>
<dt>December</dt>
</dl>
</div>
这里是jQuery代码
$(document).ready(function() {
$("#archive dl dt:gt(2)").hide();
$("#archive dl dt").each(function(index, value) {
$(this).click(function() {
if ($("#archive dl dt:visible").size() == (index + 1)) {
$(this).next("dt").show(500);
$("#archive dl dt:eq(" + (index - 2) + ")").hide(500);
}
});
});
});
我也有一个jfiddle链接: Live Example
我遇到的问题是它只能运行一次。点击四月时,没有任何反应。我也没有在调试控制台上出现任何错误。
感谢任何帮助。感谢。
答案 0 :(得分:2)
这可以简化很多,只需使用next()
和prev()
$("#archive dl dt:gt(2)").hide();
// we'll use not(":last") so that December can't be clicked
$("#archive dl dt").not(":last").each(function(index, value) {
$(this).click(function() {
$(this).next().show(500);
$(this).prev().prev().hide(500);
});
});
答案 1 :(得分:1)
我只是更改if()
语句,以检查.next('dt')
元素.is(':hidden')
是否。
示例: http://jsfiddle.net/patrick_dw/y5ngh/3/
if ($(this).next("dt").is(':hidden')) {
$(this).next("dt").show(500);
$("#archive dl dt:eq(" + (index - 2) + ")").hide(500);
}
这是两个方向的完整版本。它可以简化一点,但这很有效。
示例: http://jsfiddle.net/patrick_dw/y5ngh/5/
$("#archive dl dt").each(function(index, value) {
$(this).click(function() {
if ($(this).next("dt").is(':hidden')) {
$(this).next("dt").show(500);
$("#archive dl dt:eq(" + (index - 2) + ")").hide(500);
} else if ($(this).prev("dt").is(':hidden')) {
$(this).prev("dt").show(500);
$("#archive dl dt:eq(" + (index + 2) + ")").hide(500);
}
});
});
更新版本,减少选择和冗余:http://jsfiddle.net/patrick_dw/y5ngh/11/
$("#archive dl dt").click(function() {
var $th = $(this), dir = ['next', 'prev'];
if ($th.prev("dt").is(':hidden')) dir.reverse();
else if ($th.next("dt").is(':visible')) return;
$th[dir[0]]("dt").show(500)[dir[1] + 'Until'](':hidden').last().hide(500);
}).slice( 3 ).hide();
答案 2 :(得分:0)
使用此
$(document).ready(function()
{
$("#archive dl dt:gt(2)").hide();
$("#archive dl dt").click
(
function()
{
$("#archive dl dt").hide();
if($(this).next()!=null && $(this).next().length!=0 && $(this).next().next()!=null && $(this).next().next().length!=0)
{
$(this).next().show();
$(this).next().next().show();
}
}
);
});