显示/隐藏、SlideIn/Out和FadeIn/Out不工作-Javascript_Javascript

显示/隐藏、SlideIn/Out和FadeIn/Out不工作-Javascript

javascript

显示/隐藏、SlideIn/Out和FadeIn/Out不工作-Javascript,javascript,Javascript,我无法使我的slidein/slideout和fadein/fadeout正常工作。以下是我想要实现的目标 1）对于5K/10K事件，当用户单击图片时，使用 show/hide方法使事件列表显示和消失 2）对于半程马拉松比赛，当用户单击图片时，使用 slideUp/slideDown方法使事件列表显示和消失 3）对于完整的马拉松比赛，当用户单击图片时，使用 fadeIn/fadeOut方法使事件列表显示和消失而且，我也试过这么做，但也没办法解决 4）在加载之前，使图片下列出的所有事件

我无法使我的slidein/slideout和fadein/fadeout正常工作。以下是我想要实现的目标

1）对于5K/10K事件，当用户单击图片时，使用 show/hide方法使事件列表显示和消失

2）对于半程马拉松比赛，当用户单击图片时，使用 slideUp/slideDown方法使事件列表显示和消失

3）对于完整的马拉松比赛，当用户单击图片时，使用 fadeIn/fadeOut方法使事件列表显示和消失

而且，我也试过这么做，但也没办法解决

4）在加载之前，使图片下列出的所有事件消失页列表只应在用户单击图片时显示

5）一次只能在页面上显示一个事件列表


FV跑步者
$（文档）.ready（函数（）{
$（“#5kpic”）。单击函数（）{
$（“#5k”）.show（）.hide（）；
});
$（“#halfpic”）。单击（函数（）{
$（“一半”）.slideup（“慢”）.slidedown（“慢”）；
});
$（“#fullpic”）。单击（函数（）{
$（“#满”）.fadein（“慢”）.fadeout（“慢”）；
});
});
福克斯山谷跑步俱乐部


5k/10k赛事
5k/10赛事

迷你短跑
10/30/17
纪念公园
Appleton
铁马湾海滩公园
绿湾
黄昏小径
11/13/17
河边公园
莱特斯顿



半程马拉松比赛
半程马拉松比赛

福克斯河马拉松2017年10月15日
皮尔斯公园
阿普尔顿
新西半球半程马拉松2017年10月29日
海湾海滩公园
绿湾
温尼贝戈跑步2017年11月27日
梅诺米尼公园
奥什科什



全程马拉松比赛
全程马拉松比赛

芝士头马拉松2017年9月24日
潘佩林公园
绿湾
17年10月29日环湖马拉松赛
海湾海滩公园
绿湾
福克斯城市马拉松2017年11月12日
梅诺米尼公园
奥什科什

下面列出了几个问题：

我更改了

$（“#5kpic”）。单击函数（）{

为

$（“#5kpic”）。单击（函数（）{

我将自动关闭标签

更改为

我将

移动到

标记的底部，这样就不再需要

$（文档）.ready

我将“显示/隐藏”更改为“切换”

我将slideup/slidedown更改为

slideToggle

我将fadein/fadeout更改为

fadeToggle

我添加了css来隐藏页面加载中的

.races

部分


FV跑步者
.比赛{
显示：无；
}
福克斯山谷跑步俱乐部


5k/10k赛事
5k/10赛事

迷你斯普林特17年10月30日纪念公园
铁马湾海滩公园2017年6月11日绿湾海滩公园
暮色小径2017年11月13日河边公园莱特斯顿



半程马拉松比赛
半程马拉松比赛

福克斯河马拉松2017年10月15日皮尔斯公园
新西半球半程马拉松赛2017年10月29日海湾海滩公园绿湾
温尼贝戈跑步2017年11月27日梅诺米尼公园



全程马拉松比赛
全程马拉松比赛

芝士头马拉松2017年9月24日
潘佩林公园
绿湾
17年10月29日环湖马拉松海滩公园绿湾
福克斯城市马拉松2017年11月12日梅诺米尼公园

$（“#5kpic”）。单击（函数（）{
$（“#5k”）.toggle（）；
});
$（“#halfpic”）。单击（函数（）{
$（“一半”）。滑动切换（“慢”）；
});
$（“#fullpic”）。单击（函数（）{
$（“#满”）.fadeToggle（“慢”）；
});