Как нажимать, чтобы развернуть и изменить размер других divs

Question

На моей веб-странице я пытаюсь сделать так, чтобы, когда пользователь нажимает «Ссылка 1», он вызывает анимированное расширение div #section1. Если бы были какие-то ранее открытые div, они бы спрятались, закройте сначала перед расширением #section1.

Пока расширенный #section1 находится в открытом состоянии, нажатие «Ссылка 1» может скрыть # section1.

То же самое последовательное поведение относится и к "Ссылка 2" с #section2 и "LINK3" с #section3

См 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 для макияжа нав предметы Clickable:

$("#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 преобразования свойство анимации с эффектом «слайд». Он имеет лучшую производительность.

Answer 2

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

Answer 3

первого: не забудьте включить 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 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%); } 
}