Question

当我点击显示/隐藏切换时，如何模仿维基百科页面上的内容列表所使用的效果？我还希望切换到“内容”标题旁边，但它不起作用。

.contents_list {
  background-color: #fff;
  color: #000;
  display: inline-block;
  padding: 20px;
  font-size: 1.25em;
  line-height: 1.25;
  box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.45);
}
.toggle {
  display: inline;
}
.contents_list h3 {
  font-size: 1.7em;
  line-height: 100%;
  color: #000;
}
.contents_list a {
  font-size: 1.25em;
  line-height: 100%;
  text-decoration: none;
  position: relative;
  color: #000;
}
.contents_list ol {
  counter-reset: item;
  list-style-type: decimal;
}
.contents_list li {
  margin-bottom: 20px;
  display: block;
}

<div class="contents_list">
  <h2>Contents</h2><span class="toggle">&nbsp;[<a role="button" tabindex="0" id="togglelink">show</a>]&nbsp;</span>
  <ol>
    <li><a>A1</a>
    </li>
    <li><a>A2</a>
    </li>
  </ol>
</div>

Answer 1

对于第一个选项，您可以使用JQuery切换函数toggle()

对于第二个选项，请使用html bookmarks，将ID添加到部分，然后使用ID标记中的a进行导航。

$('#togglelink').click(function() {
  $('ol').toggle(300);
  if ($(this).text() == "show")
    $(this).text("hide")
  else
    $(this).text("show");
})

.contents_list {
  background-color: #fff;
  color: #000;
  display: inline-block;
  padding: 20px;
  font-size: 1.25em;
  line-height: 1.25;
  box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.45);
}
.toggle {
  display: inline;
}
.contents_list h3 {
  font-size: 1.7em;
  line-height: 100%;
  color: #000;
}
.contents_list a {
  font-size: 1.25em;
  line-height: 100%;
  text-decoration: none;
  position: relative;
  color: #000;
}
.contents_list ol {
  counter-reset: item;
  list-style-type: decimal;
}
.contents_list li {
  margin-bottom: 20px;
  display: block;
}
h2{
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents_list">
  <h2>Contents</h2><span class="toggle">&nbsp;[<a role="button" tabindex="0" id="togglelink">hide</a>]&nbsp;</span>
  <ol>
    <li><a href="#firstBookmark">A1</a>
    </li>
    <li><a href="#secondBookmark">A2</a>
    </li>
  </ol>
</div>


<div id="firstBookmark">
  <h1>A1</h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.\Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum
  dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.
</div>
<div id="secondBookmark">
  <h1>A2</h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.\Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum
  dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.
</div>

如何垂直增长和缩小菜单（带动画）

1 个答案: