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()`方法来切换盒子的可见性，并使用淡入/淡出效果来显示/隐藏盒子。

相关问题

jq盒子隐藏

要隐藏一个元素，可以使用 jQuery 的 `hide()` 方法，例如：

$("#myElement").hide();

其中，`#myElement` 是要隐藏的元素的选择器。如果要在一定时间后自动显示元素，可以使用 `setTimeout()` 方法来实现，例如：

setTimeout(function() {
    $("#myElement").show();
}, 5000); // 5000 表示 5 秒后显示元素

这个代码片段会在 5 秒后显示 `#myElement` 元素。

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