如何使用toggleClass在Owl Carousel中一次只打开一个div

Question

演示

$('.ca-more').on('click', function(event) {
$('.ca-more').parent().siblings('.ca-content-wrapper').removeClass('active2');
$(this).parent().siblings('.ca-content-wrapper').toggleClass('active2');
var $that = $('.ca-content-wrapper.active2');
$($that).toggleClass('clicked');
$($that).closest('.owl-item').toggleClass('parent').next().toggleClass('cousin');
return false; });  

我已经定制了owl-carousel，当在显示的div中单击一个按钮时，它可以滑出一个隐藏的div。当隐藏的div滑出时，它会将其他显示的div推到右侧。到目前为止，如果我打开一个，然后尝试打开另一个，两个都会同时打开。如果我点击一个，它会关闭所有其他的，我该怎么做？

<div class="item link">
            <div class="ca-item-main">
                <div class="transparent-right"></div>
                <img src="http://placehold.it/350x525" class="img-responsive"/>
                <a href="#" class="ca-more smore">
                    <span class="more">></span>
                    <span class="less"><</span>
                </a>
            </div>
            <div class="ca-content-wrapper">
              <div class="ca-content">
                <div class="ca-content-text">
                  <h2 class="movie-title">This is the h2 title</h2>
                  <h4 class="date-rating">This is the h4 title</h4>
                  <h4 class="before-netflix">Another h4 title</h4>
                  <a href="#" class="owl-trailer-link"><i class="fa fa-play" aria-hidden="true"> </i>&nbsp;&nbsp;Button 1</a>
                  <a href="#" class="owl-trailer-link">Button 2</a>
                </div>
              </div>
            </div>
          </div>

Answer 1

您忘记删除.clicked类：

$('.ca-more').on('click', function(event) {
    $('.ca-more').parent().siblings('.ca-content-wrapper').removeClass('active2');
    $('.ca-content-wrapper.clicked').removeClass('clicked'); /* <- You forgot this */
    $(this).parent().siblings('.ca-content-wrapper').toggleClass('active2');
    var $that = $('.ca-content-wrapper.active2');
    $($that).toggleClass('clicked');
    $($that).closest('.owl-item').toggleClass('parent').next().toggleClass('cousin');
    return false;
});

我还建议只设置一个parent类，根本不需要设置clicked类。你需要改变的是这样的东西：

而不是：

.ca-content-wrapper.clicked {
    height: 100%;
    left: 100%;
    margin: 0;
    width: 100%;
}

使用此：

.parent .ca-content-wrapper {
    height: 100%;
    left: 100%;
    margin: 0;
    width: 100%;
}

一旦容器上有了parent类，就可以对其中的任何元素进行样式化。

Answer 2

在打开单击的同级之前，请尝试关闭所有同级

 $('.ca-more').parent().siblings('.ca-content-wrapper').hide().removeClass('active2');