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

Question

我在正文上有一个背景图片，然后在图片上方有一个大框、页脚、导航栏和页眉。

我正在尝试实现一个链接到名为 slideUp 的类的按钮。这个类有一个向上箭头的图像。

当我单击此按钮时，框、页脚、导航和页眉将向上滑动并消失。然后我有另一个按钮和另一个名为 slideDown 的类，其中我有一个向下箭头的图像。当我单击此按钮时，所有内容都会滑回。

我不想一直显示两个按钮，而是想使用 if 语句，当所有内容可见时，显示 buttonUp，隐藏 buttonDown，当所有内容都隐藏时，显示 buttonDown 并隐藏 buttonUp。

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

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

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

if ($(".box").is(":visible") && $("nav").is(":visible") && $("header").is(":visible") && $("footer").is(":visible"))
{
  $("button#Up").show("fast");
	$("button#Down").hide("fast");
}
else if ($(".box").is(":hidden") && $("nav").is(":hidden") && $("header").is(":hidden") && $("footer").is(":hidden"))
{
	$("button#Up").hide("fast");
	$("button#Down").show("fast");
}

button.slideUp{
	background-image: url(arrowUp.png);
	background-size: cover;
	background-position: center;
	background-color: #1A1A1A;
	opacity: 0.75;
	height: 41px;
	width: 41px;
	position: fixed;
	right: 2px;
	bottom: 0px;
}

button.slideDown{
	background-image: url(arrowDown.png);
	background-size: cover;
	background-position: center;
	background-color: #1A1A1A;
	opacity: 0.75;
	height: 41px;
	width: 41px;
	position: fixed;
	right: 2px;
	top: 0px;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<button id="Up" class="slideUp"></button>
<button id="Down" class="slideDown"></button>

Answer 1

你是这个意思吗？

$("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");
});