[英]Can't seem to find and toggle already expanded classes
I have found the following code in combination with Packery to expand and shrink blocks when being clicked on. 我发现以下代码与Packery结合使用,可以在单击时扩展和缩小块。 I want to add to the code that when clicking a block, all other blocks that currently are expanded shrink to their original size, so that only 1 block is expanded at the time. 我想在代码中添加以下内容:单击一个块时,当前已展开的所有其他块都将缩小到其原始大小,以便此时仅扩展一个块。
This is the code 这是代码
$( function() {
var $container = $('.packery').packery();
$container.on( 'click', '.item', function( event ) {
var $item = $( event.currentTarget );
var isExpanded = $item.hasClass('is-expanded');
$item.toggleClass('is-expanded');
if ( isExpanded ) {
// if shrinking, just layout
$container.packery();
} else {
// if expanding, fit it
$container.packery( 'fit', event.currentTarget );
}
});
});
this is the codepen I found http://codepen.io/anon/pen/myLbmP 这是我发现的Codepen http://codepen.io/anon/pen/myLbmP
I've been trying using the .not selector, but I can't seem to rewrite it to work properly. 我一直在尝试使用.not选择器,但似乎无法重写它以使其正常工作。 Thanks in advance 提前致谢
Change your code to this: 将代码更改为此:
$( function() {
var $container = $('.packery').packery();
$container.on( 'click', '.item', function( event ) {
var $item = $( event.currentTarget );
var isExpanded = $item.hasClass('is-expanded');
//NEW LINE BELOW
$(".is-expanded").removeClass("is-expanded");
if ( isExpanded ) {
// if shrinking, just layout
$container.packery();
} else {
$item.addClass('is-expanded');
// if expanding, fit it
$container.packery( 'fit', event.currentTarget );
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.