Javascript 从相同的类名元素中分离jquery事件

我试图用两个按钮创建一个可滚动的项目列表：向上和向下。我的目标是每当我点击这两个按钮中的任何一个时显示一个项目。 我正在使用jQuery事件

slideUp（）

，但每当我单击按钮时，所有列表项都会向上滑动。我无法将每个项目的事件分开。帮忙

$（文档）.ready（函数（）{
$（“.bott”）。单击（函数（）{
$（“.item”）.slideUp（）；
});
});

试验

主页
关于
服务
联系方式

向下
向上的

A
B
C
D
E
F
G
H
I
J


$（文档）.ready（函数（）{
var i=0；
$（“.bott”）。单击（函数（）{
$（“.item:eq（“+i+”）.slideUp（）；
i++；
});
$（“.bott2”）。单击（函数（）{
我--；
$（“.item:eq（“+i+”）.slideDown（）；
});
});

试验

主页
关于
服务
联系方式

向下
向上的

A
B
C
D
E
F
G
H
I
J

维护一个计数器，跟踪您正在向上或向下滑动的项目。检查以下示例，并对
sideDown（）
（
计数器--
on sliceDown（））执行相同操作


$（文档）.ready（函数（）{
var计数器=1；
$（“.bott”）。单击（函数（）{
$（“.item:n个子项（“+计数器+”）.slideUp（）；
计数器++；
});
});

试验

主页
关于
服务
联系方式

向下
向上的

A
B
C
D
E
F
G
H
I
J

它可以工作，但我必须先单击第一个按钮，然后用第二个按钮继续向上滑动项目。我想用一个按钮向上滑动，另一个按钮向下滑动。感谢you@Glory，检查我的最新答案。它现在工作得很好。我想要第一个按钮分别滑动整个列表项。对不起。糟糕的是，我在保存答案之前错过了一次更新@Glory，现在请检查密码。我又更新了一次。