Jquery 使列中的复选框与'；显示：无'；

在“我的UI”中，如果选中了“地区”和“国家”复选框，您可以在右侧看到该地区及其国家。如果仅选中国家复选框，则相关国家将被放入“未分组国家”框中。参见小提琴：

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

//这将打开每个区域部分，并在函数末尾引用“未分组国家”部分的数据。
$（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
if（$（this.attr（“value”）==“RegionEurope”）{
$（“.TextRegionEuroClass.ContainerEuroClass”）.slideToggle（0）
var targetBox=$（this.prop（“选中”）？'.ContainerEuroClass'：'.CountryRHWrapperClass'
$（'.myEuropeCountries'）。附录（$（targetBox））
}
if（$（this.attr（“value”）==“RegionNAM”）{
$（“.TextRegionNAMClass、.ContainerNameClass”）.slideToggle（0）
var targetBox=$（this.prop（“选中”）？'.ContainerNAMClass'：'.CountryRHWrapperClass'
$（'.myNAMCountries'）。附录（$（targetBox））
}
});
});
函数sortByText（a，b）{
返回$.trim（$（a）.text（））>$.trim（$（b）.text（））？1:-1；
}
//对mywrapper div下的所有国家/地区进行预排序（仍将其隐藏）
var li=$（“.CountryRHWrapperClass”）.children（“标签”）.detach（）.sort（sortByText）
$（“.CountryRHWrapperClass”）.append（li）
//点击处理程序将只切换显示，国家已排序
$（'input[type=“checkbox”]”）。单击（函数（）{
$（'.my'+$（this.attr（“id”）.slideToggle（0）
})

.TopHeader{
边框：1px纯绿色；
高度：50px；
字体大小：20px；
}
.LH集装箱类{
浮动：左；
高度：200px；
宽度：300px；
字体系列：Arial字体大小：12px；
边框：1px纯蓝色；
}
.Rh容器类{
左边距：305px；
高度：200px；
字体系列：“Verdana”，Arial，衬线；
字体大小：11px；
右边距：10px；
边框：1px纯红；
}
.FourShapeRectangleClass{
宽度：100px；
高度：50px；
保证金：1px；
边框：1px纯黑；
浮动：左；
空白：换行；
}
/* -------------------------------------------------- */
#DivForlRegionHeaderId{
高度：30px；
空白：换行；
边框：1px纯绿色；
字体大小：15px；
字体大小：粗体；
}
#DivForlCountriesHeaderId{
高度：30px；
空白：换行；
边框：1px纯绿色；
字体大小：15px；
字体大小：粗体；
}
#DivForlRegionLabelId{
边框：1px纯绿色；
线高：160%；
}
/* ---------------------------------------------------------- */
.CountryRHWrapperClass{
边缘顶部：30px；
边框：1px纯棕色；
}
.HeaderUngroupedCountriesClass{
字体大小：12px；
字体大小：粗体；
}
/* ---------------------------------------------------------- */
.ContainerEuroClass{
显示：无；
边框：1px纯蓝色；
}
.TextRegionEuroClass{
显示：无；
字体大小：12px；
字体大小：粗体；
填充：2px 0px 6px 3px；
背景：黄色；
}
.脊髓畸形{
显示：无；
宽度：150px；
}
/* ---------------------------------------------- */
.集装箱玻璃{
显示：无；
边框：1px纯蓝色；
}
.TextRegionNAMClass{
显示：无；
字体大小：12px；
字体大小：粗体；
填充：2px 0px 6px 3px；
背景：黄色；
}
.缅甸国家{
显示：无；
宽度：150px；
}

地区和国家选择器
区域
国家
欧盟地区
里约纳
欧盟国家
国家NA
欧洲
北美
非集团国家
西班牙
德国
奥地利
法国
瑞士
波兰
加拿大
墨西哥
美国
古巴
波多黎各
巴拿马
格林纳达

使用这两种样式

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

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

---

谢谢@Anjireddy，你让我走上了正轨。除了使用CSS代码外，我还需要添加“.myEuropeCountries{width:180px；float:left；}”，以使列排列整齐。我花了很长时间才发现“display:inline block”可以替换为“float:left；”从那时起，我再也没有显示/隐藏问题了。我不知道为什么“内联块”对我不起作用。