如何使用 jquery 为嵌套动态列表 expand/collapse (+/-)

Question

我试过切换功能，但我认为选择合适的列表有点问题。

var json ={"Asia": [{"regionList": [{"regionName": "Eastern Asia","Countrylist": [{"countryName": "China","subCountryList": [{"subCountryName": "Southern China"},{"subCountryName": "Eastern China"}]},{"countryName": "Hong Kong"}]},{"regionName": "Southern Asia","Countrylist": [{"countryName": "India"},{"countryName": "Pakistan"}]}]}]};
var html = '';
$.each(json, function(i1, object) {
  html += '<li><input type="checkbox" /><b class=' + i1 + ' ><a name="' + i1 + '" >' + i1 + '</a></b>';
    $.each(object, function(i2, continent) {
 html += '<ul>';
     $.each(continent.regionList, function(i3, region) {
     html += '<li><input type="checkbox" /><b>' + region.regionName + '</b>';
    $.each(region.Countrylist, function(i4, country) {
   html += '<ul><li class=' + country.countryName + '><input type="checkbox" />' + country.countryName;
   if (country.subCountryList) {
     $.each(country.subCountryList, function(i5, subCountry) {
    html += '<ul><li><input type="checkbox" />' + subCountry.subCountryName + '</li></ul>';
     });
    $("b." + country.countryName).toggle(function() {
     $(this).children('ul').slideUp();
    },
    function() {
     $(this).children('ul').slideDown();
    });
    };
    html += '</li></ul>';
     });
     html += '</li>';
   });
   html += '</ul>';
    });
    html += '</li>';
  });

  $('#regionContent ol').html(html);

li, ol{list-style:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="regionContent">
  <ol></ol>
</div>

我想给有子国家（中国南方）的国家名称（中国）添加切换功能。在点击中国时，它应该用 +/- 符号折叠所有子国家列表，反之亦然。

Answer 1

尝试

var json = {
  "Asia": [{
    "regionList": [{
      "regionName": "Eastern Asia",
      "Countrylist": [{
        "countryName": "China",
        "subCountryList": [{
          "subCountryName": "Southern China"
        }, {
          "subCountryName": "Eastern China"
        }]
      }, {
        "countryName": "Hong Kong"
      }]
    }, {
      "regionName": "Southern Asia",
      "Countrylist": [{
        "countryName": "India"
      }, {
        "countryName": "Pakistan"
      }]
    }]
  }]
};
var html = '';
$.each(json, function(i1, object) {
  html += '<li><input type="checkbox" /><b class=' + i1 + ' ><a name="' + i1 + '" >' + i1 + '</a></b>';
  $.each(object, function(i2, continent) {
    html += '<ul>';
    $.each(continent.regionList, function(i3, region) {
      html += '<li><input type="checkbox" /><b>' + region.regionName + '</b>';
      $.each(region.Countrylist, function(i4, country) {
        html += '<ul><li class=' + country.countryName.replace(/\s/g, "-") + '><input type="checkbox" />' + country.countryName;
        
        if (country.hasOwnProperty("subCountryList") && country.subCountryList.length > 0) {
        html += '<span class=' + country.countryName.replace(/\s/g, "-") + '>-</span>';
          };
          
        $(document)
          .on("click", "input ~ span." + country.countryName.replace(/\s/g, "-") + ":first", function(e) {
            $(this).siblings("ul").is(":visible") ? $(this).siblings("ul").slideUp({
              start: function() {
                e.target.textContent = "+"
              }
            }) : $(this).siblings("ul").slideDown({
              start: function() {
                e.target.textContent = "-"
              }
            })
          });
        if (country.subCountryList) {
          $.each(country.subCountryList, function(i5, subCountry) {
            html += '<ul><li><input type="checkbox" />' + subCountry.subCountryName + '</li></ul>';

          });
        };
        html += '</li></ul>';
      });
      html += '</li>';
    });
    html += '</ul>';
  });
  html += '</li>';
});

$('#regionContent ol').html(html);

li,
ol {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="regionContent">
  <ol></ol>
</div>

如何使用 jquery 为嵌套动态列表 expand/collapse (+/-)

How to expand/collapse (+/-) for a nested dynamic list using jquery

javascript

jquery

dom

toggle