咨询：使用JQuery实现Tile鼠标悬停展开内容的代码方案

嘿，别担心，新手入门没写全代码太正常啦！我来帮你搞定这个鼠标悬停展开Tile的需求～

首先，我们的核心思路是：给每个.tile绑定鼠标悬停事件，当鼠标移上去时显示对应的.tile_content，移开时隐藏它。而且要确保每个Tile独立触发，互不影响，这里用$(this)就能精准定位当前操作的Tile元素。

完整代码示例 #

HTML（我稍微修改了下Tile的标题和内容，方便你区分测试）

<div class="container">
  <div class="tile">
    <div class="tile_header">
      <h1>Tile 1 Header</h1>
    </div>
    <div class="tile_content">
      <p>这是Tile 1的折叠内容</p>
    </div>
  </div>
  <div class="tile">
    <div class="tile_header">
      <h1>Tile 2 Header</h1>
    </div>
    <div class="tile_content">
      <p>这是Tile 2的折叠内容</p>
    </div>
  </div>
  <div class="tile">
    <div class="tile_header">
      <h1>Tile 3 Header</h1>
    </div>
    <div class="tile_content">
      <p>这是Tile 3的折叠内容</p>
    </div>
  </div>
</div>

<!-- 记得先引入jQuery库，这里用CDN示例 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

CSS（在你原有基础上增加了过渡动画，让展开更平滑）

.container { 
  display:flex; 
  justify-content:space-around; 
  margin-top: 20px;
}
.tile { 
  width:200px; 
  padding:20px; 
  background: grey; 
  cursor: pointer; /* 鼠标移上去显示手型，提升交互体验 */
  transition: all 0.3s ease; /* 过渡动画 */
}
.tile_content { 
  height:200px; 
  display:none; 
  margin-top: 15px;
  background: #eee;
  padding: 10px;
}

jQuery代码

$(document).ready(function() {
  // 给每个tile绑定hover事件
  $('.tile').hover(
    // 鼠标进入时的逻辑：显示当前tile的content
    function() {
      $(this).find('.tile_content').slideDown(); // slideDown有展开动画，比show()更友好
    },
    // 鼠标离开时的逻辑：隐藏当前tile的content
    function() {
      $(this).find('.tile_content').slideUp();
    }
  );
});

关键知识点说明 #

• $(document).ready()：确保页面DOM加载完成后再执行jQuery代码，避免找不到元素的问题。
• $('.tile').hover()：jQuery的hover方法可以同时绑定mouseenter和mouseleave两个事件，第一个函数是进入时的操作，第二个是离开时的操作。
• $(this).find('.tile_content')：$(this)代表当前触发事件的那个.tile元素，用find()找到它内部的.tile_content，这样就只会操作当前悬停的Tile的内容，不会影响其他Tile。
• slideDown()和slideUp()：相比直接用show()和hide()，这两个方法带有滑动展开/收起的动画，视觉效果更好，你也可以换成fadeIn()/fadeOut()实现淡入淡出效果，或者用toggle()切换状态。

如果想要更简洁的写法，也可以这样：

$(document).ready(function() {
  $('.tile').hover(function() {
    $(this).find('.tile_content').slideToggle();
  });
});

slideToggle()会自动判断当前元素是显示还是隐藏状态，切换对应的效果，这样只需要写一个函数就搞定啦～

内容的提问来源于stack exchange，提问作者Donnie Berry