javascript - 获取/更改元素及其中其他元素的类。 JavaScript/JQuery

Question

我按照以下格式制作了博客文件:

+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() 有效，但这不起作用。

我必须采取什么选择才能完成这项工作？

Answer 1

这个想法是捕获跨度类上的点击事件并在年份上切换事件/非事件，以便它正确显示。这是一些伪代码:

$('.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>