如何在不更改其他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

它的简单添加position: absolute到选项类别

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

Answer 2

只是一个固定的宽度设置为你的容器，并设置overflow: visible;。这样，您的切换div的宽度将不会影响其父div的宽度，而不使用position: absolute;。有关溢出的更多信息，请参阅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

试试这个

.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的位置相对，并给.options绝对的位置。这样，选项面板以相应的按钮开始。

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

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