我怎样才能点击屏幕上的任何地方（除了目标 div）让一切回到原来的位置

Question

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

查询代码

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