我怎么能点击屏幕上的任何地方(除了目标div)，让所有东西都回到原来的位置

Question

我希望能够单击屏幕上的任何位置，将所有内容恢复到原始状态，而不必重新单击按钮。如果有任何帮助，我将不胜感激。谢谢

JQUERY代码

$(".readNowbutton").click(readNow);
function readNow() {
$(".bookBox-1, .bookBox-2, .bookBox-3, .bookBox-4, .bookBox-5").animate({
top: "800",
});
$(".selectStoryBox").animate({
right: "2800",
});
$(".bookDescription-1").delay(1000).animate({
top: "120",
});
$("hr").slideToggle();
$("hr").unbind("click");
$(".readNowbutton").unbind("click");
$(".readNowbutton").click(readNowReverse);
}
//REVERSES FULL STORY

function readNowReverse() {
$(".bookBox-1, .bookBox-2, .bookBox-3, .bookBox-4, .bookBox-5").animate({
top: "0",
});
$(".bookDescription-1").animate({
top: "0",
});
$(".selectStoryBox").animate({
right: "2800",
});
$("hr").slideToggle();
}
});

Answer 1

以下是类似问题的最佳解决方案

export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
$target = $(event.target);
if (!$target.closest(selector).length && $(selector).is(':visible')) {
$(selector).hide();
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}
document.addEventListener('click', outsideClickListener)
}

Answer 2

单击任意位置运行函数readNowReverse():

$(window).click(function() {
readNowReverse()
});