Как создать вертикальное меню, которое скользит вверх и вниз?

Я в старшей школе и только начинаю изучать HTML, CSS и JQuery. Я знаю, как сделать отдельные элементы в моем списке слайдами, но я не уверен, как заставить их сползать назад и исчезать после того, как элементы будут нажаты во второй раз. Вот мой код:Как создать вертикальное меню, которое скользит вверх и вниз?

.drop { 
    width:200px; 
    background-color:#000; 
    padding:5px; 
} 
    .drop > p { 
     color:white; 
     text-align:center; 
    } 
.slide { 
    display:none; 
    width:180px; 
    background-color:#fff; 
    padding:5px; 
    margin:auto; 
} 
     <!DOCTYPE html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    </head> 
    <body> 
     <div class="drop inactive"> 
      <p>00/00/00</p> 
      <div class="slide article-preview"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus. 
      <a href=#>Read more...</a> 
      </div> 
     </div> 
     <div class="drop inactive"> 
      <p>00/00/00</p> 
      <div class="slide article-preview"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus. 
      <a href=#>Read more...</a> 
      </div> 
     </div> 
     <div class="drop inactive"> 
      <p>00/00/00</p> 
      <div class="slide article-preview"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus. 
      <a href=#>Read more...</a> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(".inactive").click(function(){ 
       $(".slide").slideUp('slow'); 
       $(this).children().slideDown("slow"); 
      }); 
     </script> 
    </body> 
</html>

источник

2015-12-11 Kelsey Lohr

использование slideToggle(); –

Создайте пример jsfiddle. Вы можете использовать эту ссылку: https://jsfiddle.net/ –

Спасибо! Сейчас у меня это работает. –

Heres a fiddle with different toggle options. Он использует функцию slideToggle в jquery, чтобы показать/скрыть указанный элемент. установив вместо номера строки "медленный", как (700) работает функция слайд более 700 миллисекунд:

$(this).find(".slide").slideToggle("slow");

http://jsfiddle.net/agbb7n61/1/

источник

2015-12-11 14:58:26 Andrew

Как создать вертикальное меню, которое скользит вверх и вниз?

ответ

Смежные вопросы