有四个类名叫part1-pic-bg的盒子。id分别是part1-iconinfo1，part1-iconinfo2，part1-iconinfo3，part1-iconinfo4，在这个大盒子里面分别有一个类名叫part1-iconinfo的小盒子，，id值分别叫part1-iconinfo1-content，part1-iconinfo2-content，part1-iconinfo3-content，part1-iconinfo4-content，最初类名叫part1-iconinfo的盒子是隐藏状态，当点击大盒子的时候，对应的显示各自的小盒子，点击第二个盒子的时候隐藏第一个盒子，点击任意地方可以隐藏小盒子的html，css，jquery代码

HTML代码：

<div class="part1-pic-bg">
  <div id="part1-iconinfo1" class="part1-iconinfo">
    <div id="part1-iconinfo1-content" class="part1-iconinfo-content">
      // 第一个盒子的内容
    </div>
  </div>
  <div id="part1-iconinfo2" class="part1-iconinfo">
    <div id="part1-iconinfo2-content" class="part1-iconinfo-content">
      // 第二个盒子的内容
    </div>
  </div>
  <div id="part1-iconinfo3" class="part1-iconinfo">
    <div id="part1-iconinfo3-content" class="part1-iconinfo-content">
      // 第三个盒子的内容
    </div>
  </div>
  <div id="part1-iconinfo4" class="part1-iconinfo">
    <div id="part1-iconinfo4-content" class="part1-iconinfo-content">
      // 第四个盒子的内容
    </div>
  </div>
</div>

CSS代码：

.part1-iconinfo-content {
  display: none;
}

jQuery代码：

$(document).ready(function() {
  // 点击大盒子显示小盒子
  $(".part1-iconinfo").click(function() {
    var contentId = "#" + $(this).attr("id") + "-content";
    $(contentId).show();
    $(".part1-iconinfo-content").not(contentId).hide();
  });
  
  // 点击任意地方隐藏小盒子
  $(document).click(function(event) {
    if (!$(event.target).closest(".part1-pic-bg").length) {
      $(".part1-iconinfo-content").hide();
    }
  });
});

解释：

首先，我们在HTML中定义了四个大盒子和对应的小盒子，并将小盒子的类名设置为`part1-iconinfo-content`，初始状态下它们都是隐藏的。

然后，在CSS中，我们将所有小盒子的`display`属性设置为`none`，这样它们就不会在页面上显示出来。

接下来，在jQuery中，我们使用`.click()`方法来监听大盒子的点击事件。当大盒子被点击时，我们获取到对应的小盒子的ID，将其显示，同时将其他小盒子隐藏。我们使用`.not()`方法来排除当前被点击的小盒子，以免它也被隐藏了。

最后，我们使用`$(document).click()`方法来监听整个文档的点击事件。如果用户点击了文档中除了大盒子和小盒子之外的任何地方，我们就隐藏所有小盒子。