jquery - 下拉菜单在单击时将选项下拉

Question

我有一个包含 4 个链接的下拉菜单，当我点击其中一个时，菜单的其余部分就会下拉。

HTML代码是:

<div class="dropdown-graus dropdown-element">
<div class="dropdown-graus-button dropdown-button">GRADES</div>

<div class="dropdown-graus-content">

<div class="dropdown-graus-facultat-1 dropdown-facultad">
<div class="facultat-1-name">LABEL 1</div>
<div class="facultat-1-view">VIEW 1</div>
</div>

<div class="dropdown-graus-facultat-2 dropdown-facultad">
<div class="facultat-2-name">LABEL 2</div>
<div class="facultat-2-view">VIEW 2</div>
</div>

<div class="dropdown-graus-facultat-3 dropdown-facultad">
<div class="facultat-3-name">LABEL 3</div>
<div class="facultat-3-view">VIEW 3</div>
</div>

</div>
</div>

<div class="dropdown-masters dropdown-element">
<div class="dropdown-masters-button dropdown-button">MASTERS</div>
<div class="dropdown-masters-content"></div>
</div>

<div class="dropdown-futurs dropdown-element">
<div class="dropdown-futurs-button dropdown-button">FUTURE</div>
<div class="dropdown-futurs-content"></div>
</div>

<div class="dropdown-coneix dropdown-element">
<div class="dropdown-coneix-button dropdown-button">CONTACT</div>
<div class="dropdown-coneix-content"></div>
</div>

和CSS:

.dropdown-graus-content {
    display: none;
    overflow: hidden;
    float: left;
    width: 100%;
    background-color: #f0f0f1;
    padding: 20px 10px;
}

.dropdown-masters-content {
    display: none;
}

.dropdown-futurs-content {
    display: none;
}

.dropdown-coneix-content {
    display: none;
}

.dropdown-button {
    float: left;
    padding: 0.312em 0.625em;
}

.dropdown-button {
    padding: 0.312em 0.625em 0.312em 0em;
    font-variant: small-caps;
    font-size: 1.25em;
}

.dropdown-facultad {
    float: left;
    background-color: white;
    padding: 10px 20px;
    width: 300px;
}

.dropdown-graus-facultat-1 {
    margin: 0 5px 0 0;
}

.dropdown-graus-facultat-2 {
    margin: 0px 5px;
}

.dropdown-graus-facultat-3 {
    margin: 0 0 0 5px;
}

这是一个带有代码的 jsfiddle:http://jsfiddle.net/9wDgL/

如果单击 GRADES，您将看到菜单是如何向下推的。 onClick() 显示的内容必须是相对的，因为其余内容必须向下推。

我已经这样做了很多次，但我找不到为什么它现在不起作用。

Answer 1

只需交换 div 的顺序，以便所有下拉内容都位于所有菜单项之后:

JSFiddle here

    <!-- menu items -->
    <div class="dropdown-graus dropdown-element">
        <div class="dropdown-graus-button dropdown-button">GRAUS</div>
    </div>
    <div class="dropdown-masters dropdown-element">
        <div class="dropdown-masters-button dropdown-button">MASTERS</div>
    </div>
    <div class="dropdown-futurs dropdown-element">
        <div class="dropdown-futurs-button dropdown-button">FUTURE</div>
    </div>
    <div class="dropdown-coneix dropdown-element">
        <div class="dropdown-coneix-button dropdown-button">CONTACT</div>
    </div>

    <!-- dropdown content -->
    <div class="dropdown-graus-content">
        <div class="dropdown-graus-facultat-1 dropdown-facultad">
            <div class="facultat-1-name">LABEL 1</div>
            <div class="facultat-1-view">VIEW 1</div>
        </div>
        <div class="dropdown-graus-facultat-2 dropdown-facultad">
            <div class="facultat-2-name">LABEL 2</div>
            <div class="facultat-2-view">VIEW 2</div>
        </div>
        <div class="dropdown-graus-facultat-3 dropdown-facultad">
            <div class="facultat-3-name">LABEL 3</div>
            <div class="facultat-3-view">VIEW 3</div>
        </div>
    </div>
    <div class="dropdown-masters-content"></div>
    <div class="dropdown-futurs-content"></div>
    <div class="dropdown-coneix-content"></div>
</div>