使欄中的複選框與'display：none'一起工作

Question

在我的用戶界面中，如果同時選擇區域和國家複選框，則可以在右側看到區域及其國家/地區。如果只選擇國家複選框，則將相關國家放入「未分組國家」框中。請參閱小提琴：http://jsfiddle.net/m92hfs0b/

我試圖將國家顯示爲最多3列，無論它們是在其地區下顯示的 ，還是顯示在「未分組國家」框中。 國家順序需要從左到右。我嘗試過使用來自這裏的許多帖子的建議，包括內嵌塊，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; 
    }