有四个盒子，点击其中一个盒子就会弹出对应的详细描述信息，再次点击任意地方，就会隐藏详细描述信息的jquery代码

可以使用以下代码实现：

HTML：

<div class="box" id="box1">
  <div class="box-title">盒子1</div>
  <div class="box-content">盒子1的详细描述信息</div>
</div>
<div class="box" id="box2">
  <div class="box-title">盒子2</div>
  <div class="box-content">盒子2的详细描述信息</div>
</div>
<div class="box" id="box3">
  <div class="box-title">盒子3</div>
  <div class="box-content">盒子3的详细描述信息</div>
</div>
<div class="box" id="box4">
  <div class="box-title">盒子4</div>
  <div class="box-content">盒子4的详细描述信息</div>
</div>

CSS：

.box {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.box-title {
  font-weight: bold;
  cursor: pointer;
}

.box-content {
  display: none;
}

jQuery：

$(document).ready(function() {
  $('.box-title').click(function() {
    var content = $(this).siblings('.box-content');
    if (content.is(':hidden')) {
      content.slideDown();
    } else {
      content.slideUp();
    }
  });
  
  $(document).click(function(e) {
    if (!$(e.target).closest('.box').length) {
      $('.box-content').slideUp();
    }
  });
});

说明：

1. 盒子的标题部分设置为可点击的，点击后显示或隐藏对应的详细描述信息。
2. 为了实现点击其他地方隐藏详细描述信息的效果，可以在整个文档上绑定一个点击事件，当点击事件触发时，如果点击的元素不是盒子或盒子的子元素，就隐藏所有盒子的详细描述信息。