这是一个复杂的问题，但也是一个好主意。 我使用的以下代码将子类别显示为父类别并且正在运行：
$(function(){
$(".common-parrent-class").on("click",function(){
$child = $(this).attr('class').split(" ")[0].split("-")[0]+"-child";
var status = $('.'+$child).css('display');
$('.'+$child).toggle();
if(status == 'none'){
if($(this).attr('class').split(" ")[0]==='class5-parrent'){
$('.'+$child).appendTo('.after-5');
$(".after-class").css("display","none");
$(".after-5").css("display","flex");
}
else{
$('.'+$child).appendTo('.after-4');
$(".after-class").css("display","none");
$(".after-4").css("display","flex");
}
$(".common-child-class").css("display","none");
$('.'+$child).css("display","block");
}
if(status == 'block'){
$(".after-class").css("display","none");
}
});
$(window).resize(function() {
var windowSize = $(window).width();
});
});.after-1, .after-2, .after-3, .after-4, .after-5{
border: 1px solid black;
display:none;
width:100%;
}
.common-parrent-class{
border:1px solid black;
margin:2px;
float:left;
width:20%;
cursor:pointer;
}
.main, .sub-category{
display: inline-table;
padding:22px;
border:1px solid black;
}
.sub-category{
margin-top:10%;
display:none;
width:100%;
}
.common-child-class{
display:none;
width:100%;
}
.inner{
float:left;
width:24%;
margin:2px;
}
@media screen and (max-width: 299px) and (min-width:200px)
{
.common-parrent-class, .inner{
width:60%;
}
}
@media screen and (max-width: 420px) and (min-width:300px)
{
.common-parrent-class, .inner{
width:40%;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 main">
<div class="main-category">
<div class="class1-parrent common-parrent-class">Class1</div>
<div class="after-1 after-class"></div>
<div class="class2-parrent common-parrent-class">Class2</div>
<div class="after-2 after-class"></div>
<div class="class3-parrent common-parrent-class">Class3</div>
<div class="after-3 after-class"></div>
<div class="class4-parrent common-parrent-class">Class4</div>
<div class="after-4 after-class"></div>
<div class="class5-parrent common-parrent-class">Class5</div>
<div class="after-5 after-class"></div>
</div>
<div class="sub-category">
<div class="class1-child common-child-class">
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
</div>
<div class="class2-child common-child-class">
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
</div>
<div class="class3-child common-child-class">
<div class="class3-child-inner inner">Class 3</div>
<div class="class3-child-inner inner">Class 3</div>
<div class="class3-child-inner inner">Class 3</div>
<div class="class3-child-inner inner">Class 3</div>
</div>
<div class="class4-child common-child-class">
<div class="class4-child-inner inner">Class 4</div>
<div class="class4-child-inner inner">Class 4</div>
<div class="class4-child-inner inner">Class 4</div>
<div class="class4-child-inner inner">Class 4</div>
</div>
<div class="class5-child common-child-class">
<div class="class5-child-inner inner">Class 5</div>
<div class="class5-child-inner inner">Class 5</div>
<div class="class5-child-inner inner">Class 5</div>
<div class="class5-child-inner inner">Class 5</div>
</div>
</div>
</div>
</div>
</div>
但我需要的是，当用户点击任何父类时 在子类的原始类之后显示子类。
1）当窗口宽度为1000px时，第一行父类为Class1，Class2，Class3，Class4。
单击Class1到Class4然后它的子div需要在“after-4”类中显示
if click on Class5 then child div need to show in "after-5" class
2）当在窗口宽度360px时，第一行父母是Class1，Class2
click on Class1 & Class2 then it's child div is need to show in "after-2" class
if click on Class3 then child div need to show in "after-4" class
3）当窗口宽度为254px时，第一行父母为Class1
click on Class1 then it's child div is need to show in "after-1" class
So how can I do this ? Also when the window is resized child div need to come automatically in corresponding after class.
请参阅jsfiddle https://jsfiddle.net/felixtm/qxbzpvr1/3/
答案 0 :(得分：0)
<强>更新
更新JSFiddle以符合要求
您好@Felix您正在寻找的答案与给出的链接非常相似
以及问题
的示例jsFiddle https://jsfiddle.net/df9nykhL/通过使用给定的方法，您可以获得第一行中显示的div数量，然后您可以根据需要使用它
function countFirstRowItems(parentSelector, childSelector){
var count = 0, theTop = undefined;
$(parentSelector + " > " + childSelector).each(function(){
var thisTop = $(this).offset().top;
if(theTop === undefined){
theTop = thisTop;
}
if(thisTop != theTop){
return false;
}
count++;
});
return count;
}
var itemsDisplayedInFirstRow = countFirstRowItems(".main-category",".common-parrent-class");
How to count the number of elements on the first row of their parent element