javascript - 在父项下对齐下拉列表内容

Question

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

例如:

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

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

$(".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');
});

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%;
}

<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>

Answer 1

将 position:relative 添加到 parent 以根据它制作下拉位置，并将 float 和 width 从 text_maroon_16. 移动。到父级 mobexpand 以保持宽度和样式

查看代码片段:

$(".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');
});

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;
}

<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>