Question

我真的在努力工作，但没有得出结论。这就像我现在的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;
    }

我需要实现的是：

ACCORDION

我整天坐在这一个上，但还没有。尝试了一些JQuery代码，但似乎没有做我需要的东西我所需要的就是达到这种手风琴效果。休息可以做自己。任何帮助表示赞赏。

Answer 1

这个概念非常简单。您想捕获图像上的click事件，重置被按图像的父容器的所有兄弟的宽度，然后继续拉伸它的宽度。

这件事很简单：

$(document).on("click", "#wrapper div.content a", function(){
    var $this = $(this);
    $this
        .closest("div.content")
        .css("width","300px")
        .siblings()
        .css("width","50px");
});

自版本1.7起，

on()被添加到jQuery中。如果您使用的是早期版本，请使用live()或bind()。请记住，函数的语法已更改，因此请注意。

您可以取代document越接近父母，事件委派就越好。

在这种情况下，

300px和50px只是示例。你可以使用你想要的任何宽度。

就整页宽度而言，Apple.com在导航方面做了非常偷偷摸摸的事情，以符合他们不断扩大的搜索栏。他们在每个导航元素上都应用了display:table-cell，这样当一个扩展时，另一个扩展。实际上，这非常巧妙，你可以将它应用到你的情况中。

垂直整页宽度＆amp;高度手风琴式菜单

1 个答案: