當對象顯示或隱藏時切換按鈕

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