Jquery toggleclass在单独的div中

时间:2015-02-26 10:38:06

标签: javascript jquery twitter-bootstrap

我使用bootstrap中的js在Wordpress图库页面上进行div崩溃,但我无法使用toggle功能。当您点击另一个项目时,第一个项目不会崩溃。它保持开放。您可以看到指向开发站点的链接:Dev site link

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

我从引导的角度问这个问题,但没有得到答案。所以我想知道是否有一种方法可以使用Jquery toggleclass吗?

Bootstrap将类'应用于'到扩展的项目。所以我想我需要切换类删除它?我发现并试图适应一些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');
});

我只是无法删除&#39;中的活动课程。我想我还需要确保它只删除了&#39; in&#39;从当前活动div而不是点击将创建的div?

提前感谢任何建议。

2 个答案:

答案 0 :(得分:0)

好的,如果我们从不想要那里的in课......

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

或可能在&#39; show事件:

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

(我不确定哪一个,因为我不知道它何时添加了课程in

请参阅collapse events here

的文档

答案 1 :(得分:0)

您必须删除in课程并添加collapse课程。

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