获取/更改包含其他元素的元素的类.JavaScript/JQuery

Getting/changing class of an element with other elements in it. JavaScript/JQuery

本文关键字：元素 JQuery JavaScript 其他 包含 获取      更新时间：2023-09-26

我制作了一个博客档案，格式如下：

+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()，它可以很好地切换列表，但当页面加载时，整个列表会在开始时展开，我不希望这样。

所以我改为更改类名（活动/非活动）。我想将月份/标题列表的类更改为非活动，并在单击+span时返回。问题是使用$（this）.next（）不起作用。

如果我尝试$(this).next().hasClass("active");它将返回一个false。或者console.log($(this).next().attr("class"));，它给出未定义的。

$(this).next().html();给出：

<li class="month active"><span class="toggle">+</span><ul><li class="title active">...</li></ul></li></ul></li></ul>

+span后面的下一件事是class为active的列表，但它不识别class？我不明白为什么.thoggle（）有效，但这不行。

我有什么选择可以让它发挥作用？

我们的想法是捕获span类上的点击事件，并在年份上切换活动/非活动，以便正确显示。这里有一些伪代码：

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

当您的初始切换工作，但它显示加载的项目时，您可以将下一个元素（无序列表）设置为

style="display: none"

对于

console.log($(this).next().attr("class");

您缺少一个括号：

console.log( $(this).next().attr("class") );

希望这能有所帮助。

通过使用一点CSS并将ul的类切换为仅在单击时激活，可以解决您的问题。下面是一个工作示例。

$('.toggle').on('click', function() {     
  $(this).parent().toggleClass('active');
});
ul {
  list-style-type: none;
}
ul:not(#MainNode) {
  display: none;
}
ul.active > li > ul {
  display: block !important;
}
.toggle {
  cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="MainNode">
  <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>

相关文章：