我使用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?
提前感谢任何建议。
答案 0 :(得分:0)
好的,如果我们从不想要那里的in
课......
$(document).on('shown.bs.collapse', function () {
$('.in').removeClass('in');
})
或可能在&#39; show事件:
$(document).on('show.bs.collapse', function () {
$('.in').removeClass('in');
})
(我不确定哪一个,因为我不知道它何时添加了课程in
)
答案 1 :(得分:0)
您必须删除in
课程并添加collapse
课程。
$(document).on('show.bs.collapse', function () {
$('.in').addClass('collapse').removeClass('in');
})