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

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

如果我尝试$(this).next().hasClass("active"); 它将返回一个错误。或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之后的下一个事项是具有活动类的列表，但是它不识别该类？我不明白为什么.toggle（）有效，但事实并非如此。

我有什么选择才能使这项工作？

Answer 1

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

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

Answer 2

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

style="display: none"

至于

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

您缺少一个括号：

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

Answer 3

希望这有帮助。

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

＆＃13;

$('.toggle').on('click', function() {     
  $(this).parent().toggleClass('active');
});

＆＃13;

ul {
  list-style-type: none;
}
ul:not(#MainNode) {
  display: none;
}
ul.active > li > ul {
  display: block !important;
}
.toggle {
  cursor: pointer
}

＆＃13;

<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>

＆＃13;

获取/更改元素的类，其中包含其他元素。的JavaScript / JQuery的

3 个答案: