Javascript 如何在不更改其他div的情况下动态打开div'；位置

我有这个布局，我试图打开

选项

divs，而不移动

按钮

divs。你知道怎么做吗

$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
$（“#选项1”）.toggle（）；
});
$（“#btn2”）。单击（函数（）{
$（“#选项2”）.toggle（）；
});
$（“#btn3”）。单击（函数（）{
$（“#选项3”）.toggle（）；
});
});
.btn{
宽度：100px；
背景色：黑色；
颜色：白色；
高度：30px；
显示：内联块；
}
续{
显示：内联块；
}
.选项{
宽度：200px；
高度：150像素；
背景：绿色；
显示：无；
}

按钮1
按钮2
按钮3
只需设置容器的固定宽度，并设置溢出：可见。这样，如果不使用
position:absolute。有关溢出的详细信息


$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
//$（“#选项2”）.css（“显示”、“块”）；
$（“#选项1”）.toggle（）；
});
$（“#btn2”）。单击（函数（）{
//$（“#选项2”）.css（“显示”、“块”）；
$（“#选项2”）.toggle（）；
});
$（“#btn3”）。单击（函数（）{
//$（“#选项2”）.css（“显示”、“块”）；
$（“#选项3”）.toggle（）；
});
});
.btn{
宽度：100px；
背景色：黑色；
颜色：白色；
高度：30px；
显示：内联块；
}
续{
显示：内联块；
宽度：100px；
溢出：可见；
}
.选项{
宽度：200px；
高度：150像素；
背景：绿色；
显示：无；
}

按钮1
按钮2
按钮3
只需设置容器的固定宽度，并设置溢出：可见。这样，如果不使用
position:absolute。有关溢出的详细信息


$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
//$（“#选项2”）.css（“显示”、“块”）；
$（“#选项1”）.toggle（）；
});
$（“#btn2”）。单击（函数（）{
//$（“#选项2”）.css（“显示”、“块”）；
$（“#选项2”）.toggle（）；
});
$（“#btn3”）。单击（函数（）{
//$（“#选项2”）.css（“显示”、“块”）；
$（“#选项3”）.toggle（）；
});
});
.btn{
宽度：100px；
背景色：黑色；
颜色：白色；
高度：30px；
显示：内联块；
}
续{
显示：内联块；
宽度：100px；
溢出：可见；
}
.选项{
宽度：200px；
高度：150像素；
背景：绿色；
显示：无；
}

按钮1
按钮2
按钮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;
}

试试这个

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

您可以只给
.cont
一个相对位置，给
.options
一个绝对位置。这样，选项面板将从相应的按钮开始

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

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

您可以只给
.cont
一个相对位置，给
.options
一个绝对位置。这样，选项面板将从相应的按钮开始

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

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

将
position:absolute
添加到选项类很简单

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

将
position:absolute
添加到选项类很简单

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

只有一个div显示。全部单击div display？仅显示一个div。全部单击div显示？