Owl Carousel点击幻灯片时如何单独触发对应描述DIV的显示？

你的问题出在点击事件中直接操作了所有描述DIV，导致所有描述同时切换状态。要实现点击对应幻灯片只显示其关联描述，需要给幻灯片和描述建立一对一的关联，以下是具体解决方案：

步骤1：完善HTML结构，建立关联标识 #

给每个.owl-item添加data-target属性，值对应外部描述DIV的ID；同时给所有描述DIV统一类名（方便批量操作），并设置唯一ID：

<!-- Owl Carousel 容器 -->
<div class="owl-carousel">
  <div class="owl-item" data-target="#desc1">
    <!-- 幻灯片1内容 -->
    <img src="slide1.jpg" alt="幻灯片1">
  </div>
  <div class="owl-item" data-target="#desc2">
    <!-- 幻灯片2内容 -->
    <img src="slide2.jpg" alt="幻灯片2">
  </div>
  <div class="owl-item" data-target="#desc3">
    <!-- 幻灯片3内容 -->
    <img src="slide3.jpg" alt="幻灯片3">
  </div>
  <div class="owl-item" data-target="#desc4">
    <!-- 幻灯片4内容 -->
    <img src="slide4.jpg" alt="幻灯片4">
  </div>
</div>

<!-- 外部描述区域 -->
<div id="desc1" class="carousel-item-desc">幻灯片1的专属描述内容</div>
<div id="desc2" class="carousel-item-desc">幻灯片2的专属描述内容</div>
<div id="desc3" class="carousel-item-desc">幻灯片3的专属描述内容</div>
<div id="desc4" class="carousel-item-desc">幻灯片4的专属描述内容</div>

<!-- 引入依赖资源 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

步骤2：修改JavaScript逻辑，精准操作目标描述 #

点击幻灯片时，通过data-target获取对应描述的ID，先隐藏所有其他描述，再切换当前目标描述的显示状态：

$(document).ready(function() {
  // 初始化Owl Carousel（可根据你的需求调整配置）
  $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    margin: 10,
    nav: true
  });

  // 绑定幻灯片点击事件
  $(".owl-item").click(function() {
    // 获取当前点击项对应的描述ID
    const targetDesc = $(this).data("target");
    
    // 隐藏所有非目标描述，切换目标描述的显示状态
    $(".carousel-item-desc").not(targetDesc).slideUp();
    $(targetDesc).slideToggle();
  });
});

步骤3：添加基础样式（可选） #

让描述默认隐藏，优化显示效果：

.carousel-item-desc {
  display: none;
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

关键说明 #

• 使用data-target属性建立关联，比硬编码多个类名更灵活，后续新增幻灯片时只需添加对应data-target和描述DIV即可
• 如果不需要点击同一幻灯片时切换显示/隐藏，可将slideToggle替换为slideDown，确保点击后始终显示目标描述
• 若Owl Carousel有动态加载幻灯片的情况，需使用事件委托绑定点击事件（如$(document).on('click', '.owl-item', function(){...})）

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