html5 css3 卡住展开折叠菜单答案

【问题标题】：html5 css3 get stuck with expands collapse menuhtml5 css3 卡住展开折叠菜单
【发布时间】：2014-11-07 22:41:30
【问题描述】：

当我探索 HTML5 和 CSS3 时，我现在有一个堆栈，我尝试创建一个展开和折叠菜单，但是当菜单从 css3 下拉边框底部而不是下拉时我遇到了问题，我该如何解决？我发布我的代码，以便您可以轻松查看和纠正我，tks！

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
    $(function() {
    $('#MainMenu').click(function(){
      $('.sub').slideToggle();
    });
});
</script>
<title>Admin Control Panel - TBB Rocking Crew</title>
</head>

<body>
<div id="dHeader">
  <header> </header>
</div>
<div id="dBody">
  <aside>
    <article class="asideBoxTitle"> <a href="#"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </a> </article>
    <article class="asideBoxTitle"> <a href="#"> <img src="img/world.png" class="ico"/>
      <ul id="menu">
        <li id="MainMenu" class="asideTitle">WorldWide</li>
        <li class="sub">Chapterz</li>

        <li class="sub">Memberz</li>
      </ul>
      </a> </article> 
      <article class="asideBoxTitle"> <a href="#"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </a> </article>
  </aside>
  <!-- end aside-->
  <section> </section>
</div>
</body>
</html>

================================

@charset "utf-8";
/* CSS Document */
body{
    margin:0px;
}
aside{
    width:240px;
    background:#f5f5f5;
    position:absolute;
    top: 58px;
    bottom:0;
    border-right-width:1px;
    border-right-style:solid;
    border-right-color:#e2e2e2;

}
.asideBoxTitle{
    height:40px;
    line-height:40px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.asideBoxTitle a{
    text-decoration:none;
    float:left;

}
.asideTitle{
    color:#000;
    text-decoration:none;
    margin-left:20px;   
    margin-top:-10px;
    vertical-align:middle;

}
.asideBoxTitle ul{
    display:inline-table;
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor:pointer;
}

.sub{
    display:none;
    color:#000;
    text-decoration:none;
    margin-left:20px;   
    vertical-align:middle;
}
.sub:after{
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.ico{
    vertical-align:text-top;
    margin-left:10px;   
}
#dHeader{
    background:#20638f;
    height:58px;
    width:100%;
}

【问题讨论】：

标签： jquery html css menu collapse

【解决方案1】：

问题是您将每个项目的高度指定为 40 像素。它们必须保持在 40 像素。他们不会动。您当前正在使<a> 标签动态移动，这将起作用，但仅适用于<a> 标签内的内容；父对象不会受到影响。

解决此问题的一种简单方法是将<article class="asideBoxTitle"> 元素的height 属性设置为min-height，并从<a> 子标签中删除float 属性，以便它们影响他们父母的下一个兄弟姐妹的位置。像这样：

.asideBoxTitle{
    min-height:40px;
    line-height:40px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.asideBoxTitle a{
    text-decoration:none;
}

Here 是一个 JSFiddle。问候。

【讨论】：