jquery显示隐藏盒子

可以使用jQuery中的`show()`和`hide()`方法来实现盒子的显示和隐藏。

例如，假设我们有一个按钮和一个盒子，点击按钮时需要显示或隐藏盒子，可以使用以下代码：

HTML代码：

<button id="toggleBtn">点击切换</button>
<div id="box">这是要显示或隐藏的盒子</div>

jQuery代码：

$(document).ready(function(){
  $("#toggleBtn").click(function(){
    $("#box").toggle();
  });
});

在上面的代码中，我们使用`toggle()`方法来切换盒子的显示和隐藏状态。当按钮被点击时，`toggle()`方法会切换盒子的可见性。如果盒子当前是隐藏的，则它将被显示，反之亦然。

如果您想使用动画效果来显示和隐藏盒子，可以使用`fadeIn()`和`fadeOut()`方法，例如：

$(document).ready(function(){
  $("#toggleBtn").click(function(){
    $("#box").fadeToggle();
  });
});

在上面的代码中，我们使用`fadeToggle()`方法来切换盒子的可见性，并使用淡入/淡出效果来显示/隐藏盒子。

相关问题

有四个类名叫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()`方法来监听整个文档的点击事件。如果用户点击了文档中除了大盒子和小盒子之外的任何地方，我们就隐藏所有小盒子。

有四个类名叫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的盒子是隐藏状态，当点击大盒子的时候，对应的显示各自的小盒子，再次点击任意地方可以隐藏小盒子的jquery代码

可以使用以下代码实现：

$(document).ready(function() {
  $('.part1-pic-bg').click(function() {
    var id = $(this).attr('id');
    $('#' + id + '-content').toggle();
  });
  
  $(document).click(function(event) {
    if(!$(event.target).closest('.part1-pic-bg').length) {
      $('.part1-iconinfo').hide();
    }
  });
});

首先，当用户点击 `.part1-pic-bg` 盒子时，获取其 id 值并在该 id 后面添加 `-content`，得到对应的小盒子的 id 值，然后使用 `toggle()` 函数来显示或隐藏该小盒子。

其次，当用户点击页面中其他地方时，检查是否点击了 `.part1-pic-bg` 盒子或其内部元素，如果没有，则隐藏所有小盒子。