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

Question

我在身体上有一个背景图像，然后在图像上方有一个大框，页脚，导航栏和标题。

我想实现一个链接到一个叫做slideUp的类的按钮。这堂课有一个箭头向上的图像。

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

而不是两个按钮都显示在任何时候我想要使用一个if语句，当一切都可见时，显示buttonUp，隐藏buttonDown，当一切都隐藏时，显示buttonDown并隐藏buttonUp。

第一部分工作正常，它显示buttonUp并隐藏ButtonDown，但'其他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"); 
 
\t $("button#Down").hide("fast"); 
 
} 
 
else if ($(".box").is(":hidden") && $("nav").is(":hidden") && $("header").is(":hidden") && $("footer").is(":hidden")) 
 
{ 
 
\t $("button#Up").hide("fast"); 
 
\t $("button#Down").show("fast"); 
 
}

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

 
button.slideDown{ 
 
\t background-image: url(arrowDown.png); 
 
\t background-size: cover; 
 
\t background-position: center; 
 
\t background-color: #1A1A1A; 
 
\t opacity: 0.75; 
 
\t height: 41px; 
 
\t width: 41px; 
 
\t position: fixed; 
 
\t right: 2px; 
 
\t 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"); 
});