Javascript 对齐父项下的下拉列表内容

以上是我想要的结果，每个下拉列表都位于主标题下

例如：

• 当我单击展开折叠按钮时，A1、A2、A3、A4位于A下方
• 当我单击第二个展开折叠按钮时，B1、B2、B3、B4位于B下方

但现在我的下拉列表没有相应地对齐。您可以查看我的代码以了解更多详细信息。希望你们中的一些人能给我一些建议

$（.es_epdtitle”）。单击（函数（）{
$（'.es_expandct'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
$（“.es_epdtitle1”）。单击（函数（）{
$（'.es_expandct1'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
$（“.es_epdtitle2”）。单击（函数（）{
$（'.es_expandct2'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
ul{列表样式类型：无；边距：0；填充：0；}
.eservices_左ul li{display:inline；}
.es_expandct、.es_expandct1、.es_expandct2{
显示：无；
位置：绝对位置；
填充顶部：20px；
利润率：0.10px；
}
.es_epdtitle、.es_epdtitle1、.es_epdtitle2{
背景：url（'https://image.ibb.co/jUyN5Q/arrow_up_grey.png")不重复;；
宽度：30%；
浮动：左；
背景位置：右0px；
光标：指针；
背景色：#ccc；
利润率：0.10px；
}
.collapsed.es_epdtitle、.collapsed.es_epdtitle1、.collapsed.es_epdtitle2{
背景图像：url（'https://image.ibb.co/d669kQ/arrow_down_grey.png');
宽度：30%；
}



A.

A1
A2



B

B1
B2



C

C1
C2


将
位置：相对
添加到父级，以根据它创建下拉位置，并将浮动和宽度从文本\u栗色\u 16移动。。到父对象，展开以保持宽度和样式

请参阅代码片段：


$（.es_epdtitle”）。单击（函数（）{
$（'.es_expandct'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
$（“.es_epdtitle1”）。单击（函数（）{
$（'.es_expandct1'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
$（“.es_epdtitle2”）。单击（函数（）{
$（'.es_expandct2'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
ul{
列表样式类型：无；
保证金：0；
填充：0；
}
.eservices_离开ul li{
显示：内联；
}
.es_expandct，
.E_expandct1，
.es_expandct2{
显示：无；
位置：绝对位置；
利润率：0.10px；
}
.es_epdtitle，
.es_epdtitle1，
.es_epdtitle2{
背景：url（'https://image.ibb.co/jUyN5Q/arrow_up_grey.png")不重复;；
背景位置：右0px；
光标：指针；
背景色：#ccc；
利润率：0.10px；
}
.倒下了。是的，
.倒塌的。E_epdtitle1，
.已折叠。e_epdtitle2{
背景图像：url（'https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
.扩大{
位置：相对位置；
宽度：30%；
浮动：左；
}



A.

A1
A2



B

B1
B2



C

C1
C2


您可以始终使用
flex
：


$（.es_epdtitle”）。单击（函数（）{
$（'.es_expandct'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
$（“.es_epdtitle1”）。单击（函数（）{
$（'.es_expandct1'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
$（“.es_epdtitle2”）。单击（函数（）{
$（'.es_expandct2'）.slideToggle（）.toggleClass（'active'）；
$（this）.closest（'.mobeexpand'）.toggleClass（'collapsed'）；
});
*{
框大小：边框框；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
.eservices_离开ul li{
显示：内联；
}
.es_expandct，
.E_expandct1，
.es_expandct2{
显示：无；
位置：绝对位置；
填充物：5px；
}
.es_epdtitle，
.es_epdtitle1，
.es_epdtitle2{
背景：url（'https://image.ibb.co/jUyN5Q/arrow_up_grey.png")不重复;；
宽度：100%；
背景位置：右中；
光标：指针；
背景色：#ccc；
填充物：5px；
保证金：0；
}
.倒下了。是的，
.倒塌的。E_epdtitle1，
.已折叠。e_epdtitle2{
背景图像：url（'https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
主保险商实验室{
显示器：flex；
}
.扩大{
填充：10px；
弹性：1033.33%；
}



A.

A1
A2



B

B1
B2



C

C1
C2


酷！非常感谢：）谢谢你的回答。我认为相对位置是最好的答案：）因为flex在某些浏览器上可能不起作用。