似乎无法找到并切换已展开 类
Can't seem to find and toggle already expanded classes
我发现以下代码与 Packery 结合使用,可以在单击时扩展和收缩块。我想添加到代码中,当单击一个块时,所有其他当前展开的块都会收缩到它们的原始大小,因此此时只有 1 个块被展开。
这是代码
$( 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 );
}
});
});
这是我找到的codepen
http://codepen.io/anon/pen/myLbmP
我一直在尝试使用 .not 选择器,但我似乎无法重写它以使其正常工作。提前致谢
将您的代码更改为:
$( 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 );
}
});
});
我发现以下代码与 Packery 结合使用,可以在单击时扩展和收缩块。我想添加到代码中,当单击一个块时,所有其他当前展开的块都会收缩到它们的原始大小,因此此时只有 1 个块被展开。
这是代码
$( 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 );
}
});
});
这是我找到的codepen http://codepen.io/anon/pen/myLbmP
我一直在尝试使用 .not 选择器,但我似乎无法重写它以使其正常工作。提前致谢
将您的代码更改为:
$( 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 );
}
});
});