Как я могу щелкнуть в любом месте экрана (кроме целевого 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

Щелкните в любом месте, чтобы запустить функцию readNowReverse():

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

Answer 2

Вот лучшее решение из аналогичного вопроса

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