如何单击以展开和调整其他 div 的大小

Question

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

当展开的#section1处于打开状态时，点击"Link 1"可以隐藏#section1。

相同的一致行为适用于 "Link 2" 和 #section2，以及 "Link3" 和 #section3

有人能帮帮我吗？

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

<script type="text/javascript">
    $('#navbar a').bind('click', function(){
        var href = $(this).attr('href');
        $('.container div').removeClass('active');
        $('.container '+ href).addClass('active');
    });
</script>

Answer 2

第 1：不要忘记包含 Jquery

第二：只需使用此代码

<script>
    $('#navbar > ul > li > a').on('click', function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $('.container div[id^="section"]:not('+href+')').slideUp();
        $('.container '+ href).slideToggle();
    });
</script>

Working Demo

Answer 3

那么，您需要完成 3 个任务：

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

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

.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 变换属性来制作具有 "slide" 效果的动画。它有更好的性能。

Answer 4

你不需要JQuery

var links = document.querySelectorAll('#navbar a');

links.forEach(function(link){
     var sectionId = link.href;
     var section = document.querySelector(sectionId)
     section.addEventListner('click', function(){
         var isOpen = this.classList.contains('slide-in');

         this.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
     }) 
})

 .container > div{
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}

@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

如何单击以展开和调整其他 div 的大小

How to click to expand and resize other divs

javascript

jquery

animation

jquery-animate