我想创建一个下拉菜单(替代 Browswer 的 <select> 标签)。
所以我在这里创建了一个 <div>在另一个<div>刺激 <select>
但是当我展开 dropdown <div>自动父<div>还扩展了使页面结构非常脏。
我的意思是，这是我实际代码的输出:
当我点击展开时，结果是:
但是我想要输出，当我点击展开时，比如:
这是我的代码:
<html>
<head>
<title>Drop Down Demo</title>
<style type="text/css">
.ddown{
width:250px;
min-height: 25px;
background: #aaa;
border: 2px solid #777;
color: #444;
text-align: center;
margin: 0px;
display: inline-block;
}
.ddown a{
display: none;
width: 100%;
height: 25px;
text-align: left;
color: #666;
text-decoration: none;
background: #ddd;
border: 1px solid #999;
}
.ddownHead{
display: inline-block !important;
}
.ddownItem{
display: inline-block !important;
}
.ddownItem:hover{
background: #33a;
color: #fff;
}
.ddown_busy{
background: #77a !important;
border: 1px solid #558 !important;
color: #fff !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function toggle_expand_ddown(x){
if($(x).closest("div").find("a").eq(0).hasClass("ddown_busy")){
$(x).closest("div").find("a").eq(0).removeClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).removeClass("ddownItem");
});
});
}
else
{
$(x).closest("div").find("a").eq(0).addClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).addClass("ddownItem");
});
});
}
}
</script>
</head>
<body>
<div style="width:100%;height:25px;background:#aa0;border:2px solid #770;">
<div class="ddown">
<a class="ddownHead" href="#!" Onclick="toggle_expand_ddown(this);">Click to Expand</a>
<div>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
</div>
</div>
This is Another Child in same Parent
</div>
</body>
</html>
我还创建了 Fiddle
Here .
我想是因为CSS仅有的。但是，欢迎提出任何建议。希望您能尽快帮助我。
最佳答案
我认为您在打开和关闭时遇到问题 <div>标签
我试图添加一个 <div>标记给另一个 child 和这个 **css** :
.div2{
display: inline-block;
position: absolute;
}
或者通过添加 css 来不使用绝对位置到你的主分区:
overflow: visible;
vertical-align: top;
或通过添加 float:left到 .ddown CSS
PS:我认为选项 1 是更好的做法，您只需要将每个 child 放在 <div> 中即可。标签
关于javascript - CSS- 扩展子元素但保持父元素的尺寸不变。创建下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23287591/