EventList.js:修订间差异
来自卡厄思梦境WIKI
小无编辑摘要 |
无编辑摘要 |
||
| 第12行: | 第12行: | ||
// 如果已经是active,则隐藏效果并移除active | // 如果已经是active,则隐藏效果并移除active | ||
$this.removeClass('active'); | $this.removeClass('active'); | ||
$effect.slideUp(200); | $effect.slideUp(200, function() { | ||
adjustContainerHeight($container); | |||
}); | |||
} else { | } else { | ||
// 隐藏同一事件中其他选项的效果 | // 隐藏同一事件中其他选项的效果 | ||
| 第20行: | 第22行: | ||
// 显示当前选项的效果 | // 显示当前选项的效果 | ||
$this.addClass('active'); | $this.addClass('active'); | ||
$effect.slideDown(200); | $effect.slideDown(200, function() { | ||
adjustContainerHeight($container); | |||
}); | |||
} | } | ||
}); | |||
// 调整容器高度的函数 | |||
function adjustContainerHeight($container) { | |||
var totalHeight = 170; // 基础高度(到选项开始的位置) | |||
var backgroundHeight = 10; // 背景底部padding | |||
// | // 计算所有可见元素的高度 | ||
$container.find('.event-option, .event-effect:visible').each(function() { | |||
totalHeight += $(this).outerHeight(true); | |||
}); | |||
// 额外添加一些底部空间 | |||
totalHeight += 10; | |||
// 设置容器和背景的高度 | |||
$container.css('min-height', totalHeight + 'px'); | |||
$container.find('.event-background').css('height', (totalHeight - 160) + 'px'); | |||
} | |||
// 初始化时调整所有容器的高度 | |||
$('.event-container').each(function() { | |||
adjustContainerHeight($(this)); | |||
}); | }); | ||
}); | }); | ||
2025年10月18日 (六) 12:41的版本
$(function() {
mw.loader.load( mw.util.getUrl( 'MediaWiki:EventList.css', { action: 'raw', ctype: 'text/css' } ), 'text/css' );
// 为每个事件选项添加点击事件
$('.event-option').click(function() {
var $this = $(this);
var optionIndex = $this.data('option-index');
var $container = $this.closest('.event-container');
var $effect = $container.find('.event-effect[data-effect-index="' + optionIndex + '"]');
// 切换active状态
if ($this.hasClass('active')) {
// 如果已经是active,则隐藏效果并移除active
$this.removeClass('active');
$effect.slideUp(200, function() {
adjustContainerHeight($container);
});
} else {
// 隐藏同一事件中其他选项的效果
$container.find('.event-option').removeClass('active');
$container.find('.event-effect').slideUp(200);
// 显示当前选项的效果
$this.addClass('active');
$effect.slideDown(200, function() {
adjustContainerHeight($container);
});
}
});
// 调整容器高度的函数
function adjustContainerHeight($container) {
var totalHeight = 170; // 基础高度(到选项开始的位置)
var backgroundHeight = 10; // 背景底部padding
// 计算所有可见元素的高度
$container.find('.event-option, .event-effect:visible').each(function() {
totalHeight += $(this).outerHeight(true);
});
// 额外添加一些底部空间
totalHeight += 10;
// 设置容器和背景的高度
$container.css('min-height', totalHeight + 'px');
$container.find('.event-background').css('height', (totalHeight - 160) + 'px');
}
// 初始化时调整所有容器的高度
$('.event-container').each(function() {
adjustContainerHeight($(this));
});
});