javascript - 将列表转换为 Accordion

Question

我想在 Accordion 中转换我的列表项。但是，当我使用以下代码时，似乎 jQuery 被删除并替换了链接 (href)，即使对于没有任何子项的列表项也是如此。例如 - 列出第 2 项和第 5 项。有人可以帮我解决这个问题吗？

$(function() {

    var count = 1;
    var lisize = $( "ul > li" ).length;

    $( "ul > li" ).each(function(){

        if (count <= lisize) {
            $( "ul > li:nth-child(" + count + ") > a" ).attr ("href", ".collapse"+count);
            $( "ul > li:nth-child(" + count + ") > a" ).attr ("data-toggle", "collapse");

            $( "ul > li:nth-child(" + count + ") > ul" ).addClass( "collapse collapse"+count );

            count++;    
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<ul>
    <li>
        <a href="#1">List Item 1</a>
        <ul class="children">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li><a href="#2">List Item 2</a></li>
    <li>
        <a href="#3">List Item 3</a>
        <ul class="children">
            <li>P</li>
            <li>Q</li>
            <li>R</li>
            <li>S</li>
        </ul>
    </li>
    <li>
        <a href="#4">List Item 4</a>
        <ul class="children">
            <li>K</li>
            <li>L</li>
            <li>M</li>
            <li>N</li>
        </ul>
    </li>
    <li><a href="#5">List Item 5</a></li>
</ul>

Answer 1

将 main 作为 id 添加到主 ul 包装器，以便您可以限制迭代的位置。还将条件语句更改为 $(this).children("ul").children("li").length > 0 以便系统检查 ul 是否有 child - 只有这样它才会添加 Accordion 类

$(function() {

  var count = 1;
  var lisize = $("#main > li").length;

  $("#main > li").each(function() {
    if ($(this).children("ul").children("li").length > 0) {
      $(this).children("a").attr("href", ".collapse" + count);
      $(this).children("a").attr("data-toggle", "collapse");
      $(this).children("ul").addClass("collapse collapse" + count);

      count++;
    }
  });

});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<ul id="main">
  <li>
    <a href="#1">List Item 1</a>
    <ul class="children">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </li>
  <li><a href="#2">List Item 2</a></li>
  <li>
    <a href="#3">List Item 3</a>
    <ul class="children">
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
    </ul>
  </li>
  <li>
    <a href="#4">List Item 4</a>
    <ul class="children">
      <li>K</li>
      <li>L</li>
      <li>M</li>
      <li>N</li>
    </ul>
  </li>
  <li><a href="#5">List Item 5</a></li>
</ul>