如何在我的页面上使用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

我会使用JQuery UI（www.jqueryui.com）类在价格点击事件上执行SHOW / HIDE功能。

Answer 3

请遵循本教程：

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');
});