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

问题:

i have tried the toggle function but i think selecting a the proper list is having some problem.

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>

I wanted to add toggle function to the country name(China) which has sub countries(southern China). On Click of China it should collapse all the sub countries list with +/- sign and vice versa.

回答1:

Try

---

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>