他のdivの場所を変更せずにdivを動的に開く方法

Question

私はこのレイアウトを持っており、buttons divを移動せずにoptions divを開こうとしています。どのようにそれを行うにはどのようなアイデア？

JSFiddle link

$(document).ready(function() { 
 
    $("#btn1").click(function() { 
 
    $("#options1").toggle(); 
 
    }); 
 
    $("#btn2").click(function() { 
 
    $("#options2").toggle(); 
 
    }); 
 
    $("#btn3").click(function() { 
 
    $("#options3").toggle(); 
 
    }); 
 
});

.btn { 
 
    width: 100px; 
 
    background-color: black; 
 
    color: white; 
 
    height: 30px; 
 
    display: inline-block; 
 
} 
 
.cont { 
 
    display: inline-block; 
 
} 
 
.options { 
 
    width: 200px; 
 
    height: 150px; 
 
    background: green; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cont"> 
 
    <div id="btn1" class="btn">button 1</div> 
 
    <div id="options1" class="options"></div> 
 
</div> 
 
<div class="cont"> 
 
    <div id="btn2" class="btn">button 2</div> 
 
    <div id="options2" class="options"></div> 
 
</div> 
 
<div class="cont"> 
 
    <div id="btn3" class="btn">button 3</div> 
 
    <div id="options3" class="options"></div> 
 
</div>

Answer 1

それはオプションクラス

.options{ 
    position:absolute; 
    width: 200px; 
    height: 150px; 
    background: green; 
    display: none; 
} 

Answer 2

ちょうどあなたのコンテナに固定幅を設定し、overflow: visible;を設定します。この方法では、あなたのトグルdivsの幅は、position: absolute;を使わずに親divの幅に影響しません。オーバーフローの詳細については、See MDNを参照してください。

$(document).ready(function() { 
 
    $("#btn1").click(function() { 
 
    //$("#options2").css("display", "block"); 
 
    $("#options1").toggle(); 
 
    }); 
 
    $("#btn2").click(function() { 
 
    //$("#options2").css("display", "block"); 
 
    $("#options2").toggle(); 
 
    }); 
 
    $("#btn3").click(function() { 
 
    //$("#options2").css("display", "block"); 
 
    $("#options3").toggle(); 
 
    }); 
 
});

.btn { 
 
    width: 100px; 
 
    background-color: black; 
 
    color: white; 
 
    height: 30px; 
 
    display: inline-block; 
 
} 
 
.cont { 
 
    display: inline-block; 
 
    width: 100px; 
 
    overflow: visible; 
 
} 
 
.options { 
 
    width: 200px; 
 
    height: 150px; 
 
    background: green; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cont"> 
 
    <div id="btn1" class="btn">button 1</div> 
 
    <div id="options1" class="options"></div> 
 
</div> 
 
<div class="cont"> 
 
    <div id="btn2" class="btn">button 2</div> 
 
    <div id="options2" class="options"></div> 
 
</div> 
 
<div class="cont"> 
 
    <div id="btn3" class="btn">button 3</div> 
 
    <div id="options3" class="options"></div> 
 
</div>

Answer 3

あなただけ.contに相対的な位置を与え、.optionsに絶対位置を与えることができるこの1

.btn{ 
width: 100%; 
    background-color: black; 
    color: white; 
    height: 30px; 
    display: inline-block; 
} 

.cont{ 
    display: inline-block; 
    width: 100px; 
} 

.options{ 
    width: 100%; 
    height: 150px; 
    background: green; 
    display: none; 
} 

Answer 4

を試してみてください。そうすれば、オプションパネルは対応するボタンから始まります。

.cont{ 
    display: inline-block; 
    position: relative; 
} 

.options{ 
    width: 200px; 
    height: 150px; 
    background: green; 
    display: none; 
    position: absolute; 
}