jquery - 使列中的复选框与 'display:none' 一起使用

Question

在我的用户界面中，如果同时选中了一个地区及其国家/地区复选框，您可以在右侧看到该地区及其国家/地区。如果仅选中国家复选框，则相关国家将放入“未分组国家”框中。参见 fiddle :http://jsfiddle.net/m92hfs0b/

我正在尝试最多显示 3 列国家/地区，无论它们是显示在他们的区域下方，或者是否显示在“未分组的国家/地区”框中。国家顺序需要从左到右。我已经尝试使用这里许多帖子的建议，包括内联 block 、CSS 列等，但每个帖子似乎都阻止了“display:none”的工作，而“visibility: hidden”也没有解决任何问题。非常感谢任何帮助。

// This opens up each of the regional sections, and at the end of the function it resorts the data for the 'Ungrouped countries' section.

$(function() {
  $('input[type="checkbox"]').click(function() {
    if ($(this).attr("value") == "RegionEurope") {
      $(".TextRegionEuroClass, .ContainerEuroClass").slideToggle(0)

      var targetBox = $(this).prop("checked") ? '.ContainerEuroClass' : '.CountryRHWrapperClass'
      $('.myEuropeCountries').appendTo($(targetBox))
    }

    if ($(this).attr("value") == "RegionNAM") {
      $(".TextRegionNAMClass, .ContainerNAMClass").slideToggle(0)
      var targetBox = $(this).prop("checked") ? '.ContainerNAMClass' : '.CountryRHWrapperClass'
      $('.myNAMCountries').appendTo($(targetBox))
    }
  });
});

function sortByText(a, b) {
  return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
}

// Pre-sort all the countries under mywrapper div (still keeping them hidden)
var li = $(".CountryRHWrapperClass").children("label").detach().sort(sortByText)
$(".CountryRHWrapperClass").append(li)

// On-click handler will just toggle display, countries already sorted
$('input[type="checkbox"]').click(function() {
  $('.my' + $(this).attr("id")).slideToggle(0)
})

.TopHeader {
  border: 1px solid green;
  height: 50px;
  font-size: 20px;
}

.LHContainerClass {
  float: left;
  height: 200px;
  width: 300px;
  font-family: Arial font-size: 12px;
  border: 1px solid blue;
}

.RHContainerClass {
  margin-left: 305px;
  height: 200px;
  font-family: "Verdana", Arial, serif;
  font-size: 11px;
  margin-right: 10px;
  border: 1px solid pink;
}

.FourShapeRectangleClass {
  width: 100px;
  height: 50px;
  margin: 1px;
  border: 1px solid black;
  float: left;
  white-space: wrap;
}


/* -------------------------------------------------- */

#DivForLHRegionsHeaderID {
  height: 30px;
  white-space: wrap;
  border: 1px solid green;
  font-size: 15px;
  font-weight: bold;
}

#DivForLHCountriesHeaderID {
  height: 30px;
  white-space: wrap;
  border: 1px solid green;
  font-size: 15px;
  font-weight: bold;
}

#DivForLHRegionLabelsID {
  border: 1px solid green;
  line-height: 160%;
}


/* ---------------------------------------------------------- */

.CountryRHWrapperClass {
  margin-top: 30px;
  border: 1px solid brown;
}

.HeaderUngroupedCountriesClass {
  font-size: 12px;
  font-weight: bold;
}


/* ---------------------------------------------------------- */

.ContainerEuroClass {
  display: none;
  border: 1px solid blue;
}

.TextRegionEuroClass {
  display: none;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 0px 6px 3px;
  background: yellow;
}

.myEuropeCountries {
  display: none;
  width: 150px;
}


/* ---------------------------------------------- */

.ContainerNAMClass {
  display: none;
  border: 1px solid blue;
}

.TextRegionNAMClass {
  display: none;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 0px 6px 3px;
  background: yellow;
}

.myNAMCountries {
  display: none;
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="TopHeader">
  <label>Region and Country Selector</label>
</div>
<div id="LHContainerID" Class="LHContainerClass">
  <div id="DivForLHRegionsHeaderID" class="FourShapeRectangleClass">
    <label>Region</label>
  </div>
  <div id="DivForLHCountriesHeaderID" class="FourShapeRectangleClass">
    <label>Countries</label>
  </div>
  <div style='clear:both'></div>
  <div id="DivForLHRegionsCheckboxesID" class="FourShapeRectangleClass">
    <label><input type="checkbox" value="RegionEurope" />Region EU</label>
    <label><input type="checkbox" value="RegionNAM" />RegionNA</label>
  </div>
  <div id="DivForLHCountriesCheckboxesID" class="FourShapeRectangleClass">
    <label><input type="checkbox" id="EuropeCountries" />Country EU</label>
    <label><input type="checkbox" id="NAMCountries" />Country NA</label>
  </div>
</div>
<div id="RHContainerID" class="RHContainerClass">
  <div class="ContainerEuroClass">
    <div class="TextRegionEuroClass">Europe</div>
  </div>
  <div class="ContainerNAMClass">
    <div class="TextRegionNAMClass">North America</div>
  </div>
  <div class="CountryRHWrapperClass">
    <div class="HeaderUngroupedCountriesClass">Ungrouped countries</div>
    <label class="myEuropeCountries"><input type="checkbox" value="Spain" />Spain</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Germany" />Germany</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Austria" />Austria</label>
    <label class="myEuropeCountries"><input type="checkbox" value="France" />France</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Switzerland" />Switzerland</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Poland" />Poland</label>
    <label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label>
    <label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label>
    <label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label>
    <label class="myNAMCountries"><input type="checkbox" value="Cuba" />Cuba</label>
    <label class="myNAMCountries"><input type="checkbox" value="Puerto Rico" />Puerto Rico</label>
    <label class="myNAMCountries"><input type="checkbox" value="Panama" />Panama</label>
    <label class="myNAMCountries"><input type="checkbox" value="Grenada" />Grenada</label>
  </div>
</div>

Answer 1

使用这两种样式

    .myEuropeCountries:nth-child(3n):after {
        content: '\A';
        white-space:pre;
    }

    .myNAMCountries:nth-child(3n):after {
        content: '\A';
        white-space:pre;
    }