Question

DEMO

$('.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; });

当在显示的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

您忘记删除$('.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

在容器上有_LoginPartial.cshtml课程后，您可以设置内部任何元素的样式。

Answer 2

尝试关闭所有兄弟姐妹，然后再打开你点击的兄弟姐妹

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

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

2 个答案: