Question

在我的界面中，如果同时选中了某个地区及其国家/地区复选框，则可以在右侧看到该地区及其所在国家/地区。如果仅选中国家/地区复选框，则相关国家/地区将被放入“未组合的国家/地区”中。框。请参阅小提琴：http://jsfiddle.net/m92hfs0b/

我试图将国家/地区显示为最多3列，无论是否为显示在他们所在的地区，或者是否显示在未组织的国家/地区。框。国家订单需要从左到右。我尝试过使用这里的很多帖子提供的建议，包括内联块，CSS列等，但每个帖子似乎都停止了显示：无＆＃39;从工作，而可见性：隐藏＆＃39;也没有解决任何问题。任何帮助真的很感激。

＆＃13;

// 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)
})

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

使用这两种风格

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

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

在列中创建复选框可以使用＆＃39; display：none＆＃39;

1 个答案: