Как я могу использовать JQuery на моей странице?

Question

На скриншоте вы видите внизу список цен. Я хочу, чтобы он был скрыт по умолчанию, и когда я нажимаю кнопку «Цены», я хочу, чтобы он скользил вниз. Затем, если я нажму его снова, я хочу, чтобы список снова увеличился. Как я могу это сделать? Извините, если я мало что объяснил, пожалуйста, задавайте вопросы.

Answer 1

Вы захотите использовать анимацию slideDown и slideUp .В документации есть хороший пример, который вы можете скопировать, но в основном вы хотите поместить часть, которая скользит вверх и вниз, в отдельный div с помощью css display: none;, а затем добавить код, подобный этому:

$('#button').click(function () {
   if ($("#prices").is(":hidden")) {
      $("#prices").slideDown("slow");
   } else {
       $("#prices").slideUp("slow");
   }
});

Answer 2

Следуйте этому руководству:

http://net.tutsplus.com/javascript-ajax/build-a-top-panel-with-jquery/

Демо: http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/index.html

jQuery docs:

http://api.jquery.com/category/effects/

http://api.jquery.com/slideToggle/

В основном вы хотите:

$('#clickme').click(function() {
  $('#panel').slideToggle('slow');
});

Answer 3

Я бы использовал классы JQuery UI (www.jqueryui.com) для выполнения функций SHOW / HIDE для события клика по цене.