我按照以下格式制作了博客文件:
+Year
+Month
Title
示例代码:
<ul>
<span class="toggle">+</span>
<li class="year">$year
<ul>
<span class="toggle">+</span>
<li class="month active">$month
<ul>
<li class="title active">$title</li>
</ul>
</li>
</ul>
</li>
</ul>
我使用了$(this).next().toggle()
,它可以很好地切换列表,但整个列表在页面加载时会在开始时展开,而我不这样做我不想这样。
所以我改为更改类名称(事件/非事件)。我想将月份/标题列表的类别更改为非事件状态,然后在单击 + 跨度时将其返回。问题是使用 $(this).next() 不起作用。
如果我尝试$(this).next().hasClass("active");
它会返回一个 false。或者 console.log($(this).next().attr("class"));
,它给出 undefined。
$(this).next().html();
给出:
<li class="month active"><span class="toggle">+</span><ul><li class="title active">...</li></ul></li></ul></li></ul>
+ span 后面紧接着的是带有 active 类的列表,但它无法识别该类?我不明白为什么 .toggle() 有效,但这不起作用。
我必须采取什么选择才能完成这项工作?
最佳答案
这个想法是捕获跨度类上的点击事件并在年份上切换事件/非事件,以便它正确显示。这是一些伪代码:
$('.toggle').on('click', function(){
$(this).next().toggleClass('active').toggleClass('inactive');
});
仅当元素在页面加载时具有 inactive
类时才有效,如下所示:
<ul>
<span class="toggle">+</span>
<li class="year inactive">$year
<ul>
<span class="toggle">+</span>
<li class="month active">$month
<ul>
<li class="title active">$title</li>
</ul>
</li>
</ul>
</li>
</ul>
关于javascript - 获取/更改元素及其中其他元素的类。 JavaScript/JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36239080/