我真的很努力在做这件事，但还没有得出结论。这就是我的 HTML 和 CSS 现在的样子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="style2.css"/>
</head>
<body>
<div id="wrapper">
<div id="static"><a href="#"><img src="unai.jpg"/></a></div>
<div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div>
<div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div>
<div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div>
<div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript2.js"></script>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
html, body, #wrapper, #wrapper div{
height:100%;
}
#wrapper{
width: 100%;
}
#wrapper #static{
float: left;
}
#wrapper > div{
position: relative;
width: 20%;
background-color: #9F81F7;
float: right;
z-index: 9999;
}
#wrapper div.content{
position: relative;
left: 0;
top: 0;
width: 100%;
opacity: 0.01;
background-color: #FF0000;
z-index: -1;
}
#wrapper div:last-child:after{
content: " ";
clear: both;
}
#wrapper a{
width: 137px;
position:absolute;
top:50%;
left: 68px;
margin-top: -106px;
}
而我需要实现的是:
我已经在这个问题上坐了一整天了，但还没有。尝试了一些 JQuery 代码，但似乎无法满足我的需要。
我所需要的只是实现这种 Accordion 效果。休息可以自己做。
任何帮助表示赞赏。
最佳答案
这个概念很简单。您想要捕获图像上的点击事件，重置按下图像的父容器的所有 sibling 的宽度，然后继续拉伸(stretch)其宽度。
像这样简单的东西:
$(document).on("click", "#wrapper div.content a", function(){
var $this = $(this);
$this
.closest("div.content")
.css("width","300px")
.siblings()
.css("width","50px");
});
on() 从 1.7 版开始添加到 jQuery 中。如果您使用的是早期版本，请使用 live() 或 bind()。请记住，函数的语法已更改，因此请注意。
代替 document 的父级越接近，事件委托(delegate)就越好。
300px 和 50px 只是这种情况下的示例。您可以使用任何您想要的宽度。
在整个页面宽度方面，Apple.com 对他们的导航做了一个非常偷偷摸摸的事情，以符合他们不断扩大的搜索栏。他们在每个导航元素上应用了 display:table-cell，这样当一个元素展开时，另一个元素也会展开。实际上，它非常巧妙，您可以将其应用到您的情况中。
关于jquery - 垂直整页宽度和高度 Accordion 式菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9287129/