Javascript 显示或隐藏对象时切换按钮

我在主体上有一个背景图像，然后在图像上方有一个大方框、页脚、导航和页眉

我试图实现一个按钮，它链接到一个名为slideUp的类。此类有一个向上箭头的图像

当我点击这个按钮时，方框、页脚、导航和页眉将向上滑动并消失。然后我有另一个按钮和另一个叫做slideDown的类，我有一个向下箭头的图像。当我点击这个按钮时，所有的东西都会滑下来

我想使用一个if语句，当所有内容都可见时，show buttonUp，hide buttonDown，当所有内容都隐藏时，show buttonDown和hide buttonUp

第一部分工作正常，它显示buttonUp并隐藏ButtonDown，但“else if”不起作用。单击buttonUp后，它不会隐藏，buttonDown也不会显示。我将jQuery用于slideUp和slideDown功能

$（“按钮向上”）。单击（函数（）{
$（“.box”）.slideUp（“中”）；
美元（「资产净值」）。美元（「中等」）；
$（“标题”）.slideUp（“中”）；
$（“页脚”）.slideUp（“中”）；
});
$（“按钮向下”）。单击（函数（）{
$（“.box”）。向下滑动（“中”）；
美元（“nav”）。向下滑动（“中”）；
$（“标题”）。向下滑动（“中”）；
$（“页脚”）。向下滑动（“中”）；
});
如果（$（“.box”）是（“：可见”）&&&$（“nav”）是（“：可见”）&&$（“页眉”）是（“：可见”）&&&$（“页脚”）是（“：可见”））
{
$（“按钮向上”）。显示（“快速”）；
$（“按钮向下”）。隐藏（“快速”）；
}
如果（$（“.box”）是（“：hidden”）和（&$（“nav”）是（“：hidden”）和（&$（“header”）。是（“：hidden”）和（&$（“footer”）。是（“：hidden”））
{
$（“按钮向上”）。隐藏（“快速”）；
$（“按钮向下”）。显示（“快速”）；
}

button.slideUp{
背景图片：url（arrowUp.png）；
背景尺寸：封面；
背景位置：中心；
背景色：#1A1A；
不透明度：0.75；
高度：41px；
宽度：41px；
位置：固定；
右：2px；
底部：0px；
}
按钮。向下滑动{
背景图片：url（arrowDown.png）；
背景尺寸：封面；
背景位置：中心；
背景色：#1A1A；
不透明度：0.75；
高度：41px；
宽度：41px；
位置：固定；
右：2px；
顶部：0px；
}

你是说这个

$("button#Up").click(function() {
 $(".box").slideUp("medium");
 $("nav").slideUp("medium");
 $("header").slideUp("medium");
 $("footer").slideUp("medium");
 $("button#Down").show();
 $(this).hide();
});

$("button#Down").click(function() {
 $(".box").slideDown("medium");
 $("nav").slideDown("medium");
 $("header").slideDown("medium");
 $("footer").slideDown("medium");
 $("button#Up").show();
 $(this).hide();
});

它可以通过一个按钮、toggleClass和toggleSlide来实现

$("button").on("click",function() {
 $(this).toggleClass("slideUp slideDown");
 $(".box").toggleSlide("medium");
 $("nav").toggleSlide("medium");
 $("header").toggleSlide("medium");
 $("footer").toggleSlide("medium");
});

---

提供html完整代码，使代码片段像您认为的那样工作，意味着添加页眉和页脚等，以便我们可以看到发生了什么，或没有发生请添加实际内容-来自lorempixel或类似的图像，以创建一个感谢它的工作！但是有没有一种方法可以使用if语句？只是好奇。不是在事件处理程序之外。您需要将if添加到可见性更改的内部