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

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

单击时，下拉菜单会删除选项

1 个答案: