は親以上

Question

の下のドロップダウンリストの内容を合わせ、私が欲しい結果であり、それぞれのドロップダウンリストには、メインタイトルの下にあります。例えば

：私は開く閉じる]ボタンをクリックしたときに

• A1、A2、A3、A4は、Aの下にあります。
• 2番目の展開崩壊ボタンをクリックすると、B1、B2、B3、B4がBの下にあります。

これで、私のドロップダウンリストが適切に整列していません。詳細は私のコードをチェックすることができます。あなたの何人かが私にいくつかのアドバイスを提供できると願っています。

$(".es_epdtitle").click(function() { 
 
\t $('.es_expandct').slideToggle().toggleClass('active'); 
 
\t $(this).closest('.mobexpand').toggleClass('collapsed'); 
 
}); 
 
\t 
 
$(".es_epdtitle1").click(function() { 
 
\t $('.es_expandct1').slideToggle().toggleClass('active'); 
 
\t $(this).closest('.mobexpand').toggleClass('collapsed'); 
 
}); 
 
\t 
 
$(".es_epdtitle2").click(function() { 
 
\t $('.es_expandct2').slideToggle().toggleClass('active'); 
 
\t $(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 { 
 
\t display: none; 
 
\t position:absolute; 
 
\t padding-top: 20px; 
 
    margin: 0 10px; 
 
} 
 
\t 
 
.es_epdtitle, .es_epdtitle1, .es_epdtitle2{ 
 
\t background:url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat; 
 
\t width: 30%; 
 
\t float:left; 
 
\t background-position:right 0px; 
 
\t cursor:pointer; 
 
    background-color:#ccc; 
 
    margin: 0 10px; 
 
} 
 
\t 
 
.collapsed .es_epdtitle, .collapsed .es_epdtitle1, .collapsed .es_epdtitle2{ 
 
\t background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png'); 
 
\t 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

それに応じて、ドロップダウンの位置を作り、text_maroon_16からフロートや幅を移動するために親にposition:relativeを追加します。。幅とスタイルを維持するために、親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>

Answer 2

あなたは、常に使用することができflex：

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

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

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