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

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

1 个答案: