按下时，所有带类的元素都应显示

Question

目标
当用户点击＆＃34;显示说明时，为此滑块中的所有图像显示字幕。＆＃34;

当前状态
每张幻灯片都有一个＆＃34;显示描述＆＃34;按下时会显示该幻灯片的说明。当您到达下一张幻灯片时，容器会在其周围打开。但是你再一次按下＆＃34;显示描述＆＃34;查看该图像的描述。现在隐藏了之前幻灯片的描述。

背景
我有一个带有字幕的图像轮播[图像描述]

只应显示用户是否点击查看它们。用户也可以隐藏它们。

但问题是当你滑动到下一张图片时，标题没有显示（虽然容器仍然显示）

你必须按＆＃34;显示/隐藏描述＆＃34;再次

---

代码
该演示位于CodePen

HTML

<div class="carousel-caption">           
  <a href="#" class="read-more">
    <i class="fa fa-list-alt"></i>&nbsp;Show/Hide Descriptions
  </a>

  <div class="hide carousel-content">
    <p>Skull</p>
    <p>[text filler is here]</p>
  </div>
</div>  

CSS

.hide { display: none; }

.carousel-caption { background-color: #f3f3f3; }
.carousel-content { padding: 10px 0; }

.read-more {
  background: #666;
  color: #fff;
  display: block;
  font-weight: bold;
  letter-spacing: 0.1px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

的jQuery

$(document).ready(function () {
  var rm = $(".read-more");
  var hi = $('.hide');
  rm.click(function (e) {
    e.preventDefault();
    var now = $(this).siblings(".hide");
    now.slideToggle();
    hi.not(now).filter(':visible').slideToggle();
  });
});

Answer 1

如果我找到你，你想要一次点击就可以在用户点击左/右时打开所有字幕？如果是这样，请更改：

var now = $(this).siblings(".hide");

进入这个：

var now = $(".hide");

Answer 2

您可以在滑块的回调中滑动说明：

查看更新的笔：http://codepen.io/anon/pen/aoJFD

var hi;
window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 0,
  speed: 300,
  auto: 600000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {

    hi.slideUp();
  },
  transitionEnd: function(index, elem) {}
});


$(document).ready(function () {
  var rm = $(".read-more");
  hi = $('.hide');
  rm.click(function (e) {
    e.preventDefault();
    var now = $(this).siblings(".hide");
    now.slideToggle();
    hi.not(now).filter(':visible').slideToggle();
  });
});

详细解释如下：

  

但问题是当你滑动到下一张图片时，标题是   没有显示（虽然容器仍然显示）

显示容器，因为上一张幻灯片的标题仍然可见，但水平移动。当前幻灯片的标题不可见，因为样式不可见，因为尚未显示。