Javascript CSS-扩展子元素，但保持父元素的维度不变。创建下拉列表的步骤_Javascript_Jquery_Css_Drop Down Menu

Javascript CSS-扩展子元素，但保持父元素的维度不变。创建下拉列表的步骤

javascript jquery css drop-down-menu

Javascript CSS-扩展子元素，但保持父元素的维度不变。创建下拉列表的步骤,javascript,jquery,css,drop-down-menu,Javascript,Jquery,Css,Drop Down Menu,我想创建一个下拉菜单（替代Browswer的标签）所以在这里，我在另一个中创建了一个，以刺激但当我自动展开下拉列表时，父级也会展开，使得页面结构非常脏我的意思是，这是我实际代码的输出：当我单击展开时，结果是：但是我想要输出，当我点击Expand时，比如：这是我的密码： <html> <head> <title>Drop Down Demo</title> <style type="text/css">

我想创建一个下拉菜单（替代Browswer的

标签）

所以在这里，我在另一个

中创建了一个

，以刺激

但当我自动展开

下拉列表时，父级
也会展开，使得页面结构非常脏
我的意思是，这是我实际代码的输出：

当我单击展开时，结果是：

但是我想要输出，当我点击Expand时，比如：

这是我的密码：
<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>


下拉演示
杜恩先生{
宽度：250px；
最小高度：25px；
背景：#aaa；
边框：2px实心#777；
颜色：#444；
文本对齐：居中；
边际：0px；
显示：内联块；
}
D.下a{
显示：无；
宽度：100%；
高度：25px；
文本对齐：左对齐；
颜色：#666；
文字装饰：无；
背景：ddd；
边框：1px实心#999；
}
杜恩海德先生{
显示：内联块！重要；
}
.ddownItem{
显示：内联块！重要；
}
.ddownItem:悬停{
背景：#33a；
颜色：#fff；
}
.ddown_忙吗{
背景：#77a！重要；
边框：1px实心#558！重要；
颜色：#fff！重要；
}
功能切换\u扩展\u向下（x）{
if（$（x）.closest（“div”）.find（“a”）.eq（0）.hasClass（“ddown\u busy”））{
$（x）.最近的（“div”）.find（“a”）.eq（0）.removeClass（“ddown_busy”）；
$（x）.最近的（“div”）.查找（“div”）.每个（函数（）{
$（this.find（“a”）.each（function（）{
$（此）.removeClass（“ddownItem”）；
});
});
}
其他的
{
$（x）.最近的（“div”）.find（“a”）.eq（0）.addClass（“ddown_busy”）；
$（x）.最近的（“div”）.查找（“div”）.每个（函数（）{
$（this.find（“a”）.each（function（）{
$（此）.addClass（“ddownItem”）；
});
});
}
}
这是同一父级中的另一个子级

我还创作了小提琴
我认为这仅仅是因为CSS。不过，欢迎您提出任何建议。希望您能尽快帮助我。
我想您在打开和关闭标签时遇到了问题
我试图向另一个孩子添加一个
标记，这个**css**
：
.div2{
        display: inline-block;
        position: absolute;
    }


或者在不使用绝对位置的情况下，将此css
添加到主div：
overflow: visible;
vertical-align: top;


或者将float:left
添加到.ddown
css

附言：我认为选项1是一个更好的练习，你只需要把每个孩子都放在一个
标签上就可以了！而是添加另一个div
和absolute
定位；如果没有它，它能被修复吗？因为在我的真实例子中，不仅仅只有一个孩子，我在fiddle中只添加了一个。谢谢。但它只能在Chrome上运行，不能在Firefox和其他浏览器上运行。。我已经更新了我的答案检查演示3感谢及时的帮助。