我正在尝试将代码设置为在单击背景或其他div时隐藏div。我有四个按钮，当一个处于活动状态而另一个处于活动状态时，活动元素应该关闭而另一个打开。但是，使用我的代码，当我将鼠标移离鼠标时，活动元素会隐藏。我需要它保持直到我点击背景。我尝试了不同的选项，其中最后一个是'.mouseout'。请参阅下面的代码：
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="architecture">
<object class="archsvg" type="image/svg+xml" data="architecture-icon.svg" width="260px" height="288.14px">
</object>
<a href="architecture.html">
<div class="arch">
<p class="to-architecture">Continue to 9haus Architecture</p>
<hr class="aline" />
</div>
</a>
<button class="closea">x</button>
</div>
<script>
(function($) {
$("#a").click(function() {
$(".architecture").toggle('slide', {
direction: 'right'
}, 500);
});
})(jQuery);
</script>
<script>
(function($) {
$('.closea').click(function() {
$('.architecture').hide('slide', {
direction: 'right'
}, 500);
});
})(jQuery);
</script>
<script>
(function($) {
$(':not(.architecture)').mouseout(function() {
$('.architecture').hide('slide', {
direction: 'right'
}, 500);
});
})(jQuery);
</script>
</body>
</html>
这是问题的最小版本。