Jquery 单击时，下拉菜单将下拉选项

我有一个带有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>

下面是一个包含代码的JSFIDLE：

如果你点击成绩，你会看到菜单是如何被按下的。带有onClick（）的内容显示必须是相对的，因为必须向下推其余内容

---

我已经这样做过很多次了，但我不知道为什么它现在不工作。

只需交换

div

s的顺序，以便所有下拉内容都位于所有菜单项之后：

格拉斯
大师
未来
接触
标签1
视图1
标签2
视图2
标签3
视图3

.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;
}

    <!-- 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>