Jquery toggleclass 在单独的 div 中答案

【问题标题】：Jquery toggleclass in separate divsJquery toggleclass 在单独的 div 中
【发布时间】：2015-02-26 10:38:05
【问题描述】：

我正在使用 bootstrap 中的 js 在 Wordpress 库页面上进行 div 折叠，但我无法使切换功能正常工作。当您单击另一个项目时，第一个项目不会折叠。它保持打开状态。您可以在开发站点的链接中看到它：Dev site link

我没有使用手风琴引导设置，因为我希望每个折叠的 div 占据触发链接行下方的相同空间。

我从引导的角度提出了这个问题，但没有得到任何答案。所以我想知道是否有办法使用 Jquery toggleclass 做到这一点？

Bootstrap 将类 'in' 应用于展开的项目。所以我想我需要让切换类删除它？我找到并尝试改编一些 Jquery，但没有运气。

代码的简化版本是：

<div id="desktop-view">

    <div id="gallery-squares-1" class="gallery-squares clearfix">
        <a href="#collapseExample-1" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
            <div class="img-mouse-over"></div>
        </a><!-- .post-gallery-img -->
        <a href="#collapseExample-2" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
            <div class="img-mouse-over"></div>
        </a><!-- .post-gallery-img -->
        <a href="#collapseExample-3" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
            <div class="img-mouse-over"></div>
        </a><!-- .post-gallery-img -->
    </div> <!-- .gallery-squares -->

    <div id="gallery-expanders-1" class="gallery-expanders clearfix">
        <div class="collapse" id="collapseExample-1">
            <div class="gallery-content">
                <div class="ie-bgsize gallery-content-img"></div>
                <h6>Title</h6>
                <p>Description</p>
            </div> <!-- .gallery-content -->
        </div> <!-- .collapse -->
        <div class="collapse" id="collapseExample-2">
            <div class="gallery-content">
                <div class="ie-bgsize gallery-content-img"></div>
                <h6>Title</h6>
                <p>Description</p>
            </div> <!-- .gallery-content -->
        </div> <!-- .collapse -->
        <div class="collapse" id="collapseExample-3">
            <div class="gallery-content">
                <div class="ie-bgsize gallery-content-img"></div>
                <h6>Title</h6>
                <p>Description</p>
            </div> <!-- .gallery-content -->
        </div> <!-- .collapse -->
    </div> <!-- .gallery-expanders -->

</div>

CSS：

a.gallery-img {
    width: 15%;
    padding-bottom: 15%;
    margin: 0 1.6666666% 1.6666666% 0;
    display: block;
    float: left;
    position: relative;
    background-color: #fff;
}

.gallery-content {
    background-color: black;
    margin-bottom: 1.6666666%;
    color: #fff;
    padding: 1.6666666%;
}

.gallery-content-img {
    width: 98.5%;
    padding-bottom: 50%;
    margin-bottom: 1.8%;
}

.gallery-content h6 {
    color: #fff;
    font-size: 18px;
    line-height: 1.2em;
    margin: 0;
    width: 98.5%;
}

.gallery-content p {
    font-size: 14px;
    line-height: 1.2em;
    margin: 1% 0;
    width: 98.5%;
}

.gallery-content p:last-child {
    margin-bottom: 0;
}

.img-mouse-over {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    background: none;
}

.img-mouse-over:hover,
.img-mouse-over:active {
    background: rgba(0, 0, 0, 0.5) no-repeat center center;
}

我试过的JQuery：

$('.gallery-squares a').click(function(e){
    e.preventDefault();
    $('.collapse').removeClass('in');
});

我只是无法删除“in”上的活动类。我想我还需要确保它只从当前活动 div 中删除了“in”，而不是点击将创建的那个？

提前感谢您的任何建议。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您必须删除 in 类并添加 collapse 类。

$(document).on('show.bs.collapse', function () {
  $('.in').addClass('collapse').removeClass('in');
})

【讨论】：

这很有效，甚至对我这个 JS 勒德分子来说也很有意义！谢谢！

【解决方案2】：

好的，所以如果我们永远不想要 in 类...

$(document).on('shown.bs.collapse', function () {
  $('.in').removeClass('in');
})

或可能在“演出活动”上：

$(document).on('show.bs.collapse', function () {
  $('.in').removeClass('in');
})

（我不确定是哪一个，因为我不知道它什么时候添加了in这个类）

请参阅collapse events here 的文档

【讨论】：