Javascript 如何单击屏幕上的任何位置（除了目标div）使所有内容都返回其原始位置

我希望能够点击屏幕上的任何地方，将所有内容恢复到其原始状态，而无需重新点击按钮。非常感谢您的帮助。谢谢

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();

    }

});

---

这是一个类似的解决方案

---

这是一个类似的解决方案

---

单击任意位置运行函数

readNowReverse（）

：

---

单击任意位置运行函数

readNowReverse（）

：

---

这回答了你的问题吗？这回答了你的问题吗？

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

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