javascript - 如何点击展开其他div并调整其大小

Question

在我的网页上，我试图做到这一点，以便当用户按下“链接 1”时，它会触发 div #section1 的动画扩展。如果之前有任何打开的 div，它们会隐藏，先关闭，然后再展开#section1。

当展开的#section1处于打开状态时，点击“链接1”可以隐藏#section1。

相同的一致行为适用于带有 #section2 的“Link 2”和带有 #section3 的“Link3”

参见animated gif of desired behavior .

有人可以帮我吗？

HTML:

<div id="navbar">
   <ul>
      <li><a href="#section1">Link 1</a></li>
      <li><a href="#section2">Link 2</a></li>
      <li><a href="#section3">Link 3</a></li>
   </ul>
</div>

<div class="container">
   <div id="section1"></div>
   <div id="section2"></div>
   <div id="section3"></div>
</div>

Answer 1

那么，您需要完成 3 项任务:

1. 更改内容部分
2. 可点击的导航项
3. 动画效果

让我们开始更改内容部分。我建议您添加它们，例如 .section。最简单的方法是使用显示属性:

.section {display: none}
.section.active {display: block}

然后你需要一些 JS 来使导航项可点击:

$("#navbar").on("click", "a", function(e) {
    // cross browser href parsing
    var $tab = $("#" + e.currentTarget.href.split("#")[1]);
    // toggle one tab's visibility and close others if need
    $tab.toggleClass("active").siblings().removeClass("active");
    // prevent default
    return !1
})

最后一部分是动画效果。您需要使用 css 过渡:

.section {transition: all 0.5s}

这是一个非常简单的示例 - http://codepen.io/korzhik/pen/epwaEJ

顺便说一下，您可以使用 CSS 变换属性来制作具有“幻灯片”效果的动画。具有更好的性能。