导航与下拉菜单

Question

我真的坚持这个，真的可以使用帮助。所以我有这个代码：

<nav>
      <a class="opcion-1" title="Opcion 1" href="#">Quiénes somos</a>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
      <a class="opcion-2" title="Opcion 2" href="#">Nuestro trabajo</a>
      <a class="opcion-3" title="Opcion 3" href="#">UNAC news</a>
      <a class="opcion-4" title="Opcion 4" href="#">Cómo donar</a>
      <a class="lupa" title="Opcion 5" href="#"></a>
</nav>

CSS

nav {
  display: flex;
  justify-content: space-between;
  background-color: #ccc;
  margin-top: 10px;
}

nav > a {
  text-decoration: none;
  color: black;
  font-family: Gotham book;
  text-align: center;
  width: 20%;
  border-right: 1px solid #b3b3b3;
  padding-top: 15px;
  padding-bottom: 15px;
}

nav > .lupa {
  background-image: url("http://i.imgur.com/kXm05cw.png");
  background-repeat: no-repeat;
  background-position: center;
}
nav a.opcion-1:hover {
    background-image: url(http://i.imgur.com/JnbTq5a.png);
}

nav > a:hover {
  background-color: #FFB53A;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}

我需要的是Link1以及其他人在选择父a时下拉。然后这些将下拉并显示内部文本。我也需要能够自定义它们。你可以在下面看到我需要的东西。

Answer 1

我认为您正在寻找的内容已经内置于JQuery库中。 它叫做手风琴。

https://jqueryui.com/accordion/

以下是手风琴的一个例子。

<div id="accordion">
<a href="#one" class="first">Recent Posts</a>
<div id="one">
    this is some info.
</div>

<a href="#two">Popular Posts</a>
<div id="two">
    this is some more info.
</div>

<a href="#three">Archived Posts</a>
<div id="three">
    this is even more info.
</div>

http://jsfiddle.net/edsilv/cgn4s8y7/