Javascript 如何单击展开其他div并调整其大小

在我的网页上，我试图使其在用户按下“link1”时触发div

#section1

的动画扩展。如果以前有任何打开的div，它们将隐藏，首先关闭，然后再展开

#section1

当展开的

#section1

处于打开状态时，单击“链接1”可以隐藏#section1

相同的一致行为适用于带有

第2节的“链接2”和带有
第3节的“链接3”

看

有人能帮我吗

HTML:









$（'#导航栏a'）。绑定（'单击'，函数（）{
var href=$（this.attr（'href'）；
$（'.container div'）.removeClass（'active'）；
$（'.container'+href）.addClass（'active'）；
});
1st：别忘了包括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>


$（“#navbar>ul>li>a”）。在（'click'，函数（e）{
e、 预防默认值（）；
var href=$（this.attr（'href'）；
$（'.container div[id^=“section”]：not（'+href+'））.slideUp（）；
$（'.container'+href）.slideToggle（）；
});

嗯，你需要完成三项任务：

更改内容部分
可点击导航项目
动画效果
让我们开始更改内容部分。我建议你把它们添加到类中，如.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}

这是一个非常简单的例子——

顺便说一下，您可以使用CSS transform属性以“幻灯片”效果设置动画。它有更好的性能。
您不需要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');
     }) 
})




（如果再次按下“链接1”，则#第1节将被隐藏。）这就是OP向您询问的内容。谢谢您的帮助。最后，我如何才能从左侧开始？@Rammohamed欢迎您。。我知道你需要从左到右显示它，但是如果你发布你的css或者用你的css更新我的工作演示，我会修改它以满足你的需要：-）谢谢，伙计，这就是我要找的，你帮了我很多，再次谢谢，伙计
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%); }
}