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

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

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

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

最后一点：您可以直接使用.attr( attributes )来设置锚点的两个属性，而不必两次调用.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>

将列表转换成手风琴

2 个答案: