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

Question

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

例如：

• 当我点击展开折叠按钮时，A1，A2，A3，A4在A下。
• 当我点击第二个展开折叠按钮时，B1，B2，B3，B4在B下。

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

＆＃13;

＆＃13;

$(".es_epdtitle").click(function() {
	$('.es_expandct').slideToggle().toggleClass('active');
	$(this).closest('.mobexpand').toggleClass('collapsed');
});
	
$(".es_epdtitle1").click(function() {
	$('.es_expandct1').slideToggle().toggleClass('active');
	$(this).closest('.mobexpand').toggleClass('collapsed');
});
	
$(".es_epdtitle2").click(function() {
	$('.es_expandct2').slideToggle().toggleClass('active');
	$(this).closest('.mobexpand').toggleClass('collapsed');
});

＆＃13;

ul { list-style-type: none; margin:0; padding: 0; } 
.eservices_left ul li{display:inline;}
.es_expandct, .es_expandct1, .es_expandct2 {
	display: none;
	position:absolute;
	padding-top: 20px;
    margin: 0 10px;
}
	
.es_epdtitle, .es_epdtitle1, .es_epdtitle2{
	 background:url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
	width: 30%;
	float:left;
	background-position:right 0px;
	cursor:pointer;
    background-color:#ccc;
    margin: 0 10px;
}
	
.collapsed .es_epdtitle, .collapsed .es_epdtitle1, .collapsed .es_epdtitle2{
	background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
	width: 30%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="mobexpand collapsed">
    <div class="text_maroon_16_bold es_epdtitle">A</div>
    <ul class="es_expandct">
      <li>A1</li>
      <li>A2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed">
    <div class="text_maroon_16_bold es_epdtitle1">B</div>
    <ul class="es_expandct1">
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed noborder">
    <div class="text_maroon_16_bold es_epdtitle2">C</div>
    <ul class="es_expandct2">
      <li>C1</li>
      <li>C2</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将position:relative添加到父级以根据它创建下拉位置，并从 text_maroon_16。移动浮动和宽度。到父 mobexpand 以保持宽度和样式

请参阅代码段：

＆＃13;

＆＃13;

$(".es_epdtitle").click(function() {
  $('.es_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".es_epdtitle1").click(function() {
  $('.es_expandct1').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".es_epdtitle2").click(function() {
  $('.es_expandct2').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.eservices_left ul li {
  display: inline;
}

.es_expandct,
.es_expandct1,
.es_expandct2 {
  display: none;
  position: absolute;
  margin: 0 10px;
}

.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
  background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
  background-position: right 0px;
  cursor: pointer;
  background-color: #ccc;
  margin: 0 10px;
}

.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
  background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

.mobexpand {
  position: relative;
  width: 30%;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="mobexpand collapsed">
    <div class="text_maroon_16_bold es_epdtitle">A</div>
    <ul class="es_expandct">
      <li>A1</li>
      <li>A2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed">
    <div class="text_maroon_16_bold es_epdtitle1">B</div>
    <ul class="es_expandct1">
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed noborder">
    <div class="text_maroon_16_bold es_epdtitle2">C</div>
    <ul class="es_expandct2">
      <li>C1</li>
      <li>C2</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以随时使用flex：

＆＃13;

＆＃13;

$(".es_epdtitle").click(function() {
  $('.es_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".es_epdtitle1").click(function() {
  $('.es_expandct1').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".es_epdtitle2").click(function() {
  $('.es_expandct2').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

＆＃13;

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.eservices_left ul li {
  display: inline;
}

.es_expandct,
.es_expandct1,
.es_expandct2 {
  display: none;
  position: absolute;
  padding: 5px;
}

.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
  background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
  width: 100%;
  background-position: right center;
  cursor: pointer;
  background-color: #ccc;
  padding: 5px;
  margin: 0;
}

.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
  background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

.main-ul {
  display: flex;
}

.mobexpand {
 padding: 10px;
 flex: 1 0 33.33%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-ul">
  <li class="mobexpand collapsed">
    <div class="text_maroon_16_bold es_epdtitle">A</div>
    <ul class="es_expandct">
      <li>A1</li>
      <li>A2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed">
    <div class="text_maroon_16_bold es_epdtitle1">B</div>
    <ul class="es_expandct1">
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed noborder">
    <div class="text_maroon_16_bold es_epdtitle2">C</div>
    <ul class="es_expandct2">
      <li>C1</li>
      <li>C2</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;