将列表转换为手风琴

Question

我想在手风琴中转换我的列表项。但是，当我使用以下代码时，似乎 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 是否有子项 - 只有这样它才会添加手风琴类

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

Answer 2

第一个问题：将选择限制为所有有 ul 孩子的 li

$('ul > li:has(> ul)')

第二个问题：.each(( 有两个参数，所以你不需要 count 变量，因为你可以使用第一个参数。

最后注意：您可以直接使用 .attr( 属性( 为锚点设置两个属性，而不是两次调用 .attr(( 方法。

代码段：

$('ul > li:has(> ul)').each(function (idx, ele) {
$(ele).children('a').attr({"href": ".collapse" + idx, "data-toggle": "collapse"});
$(ele).children('ul').addClass("collapse collapse" + idx);
});

<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">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></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>