可以通过以下步骤实现:
.on()
方法绑定click
事件。$('.panel-heading').on('click', function() {
// 处理折叠面板的展开和折叠事件
});
.css()
方法修改它们的样式属性。$('.panel-heading').on('click', function() {
// 处理折叠面板的展开和折叠事件
if ($(this).hasClass('collapsed')) {
// 折叠面板展开时的处理逻辑
$('.other-element').css('height', '200px');
} else {
// 折叠面板折叠时的处理逻辑
$('.other-element').css('height', '100px');
}
});
在上述代码中,.panel-heading
是折叠面板的标题元素的选择器,.collapsed
是折叠面板折叠状态的类名,.other-element
是需要调整大小的其他元素的选择器。
这样,当折叠面板展开或折叠时,其他元素的大小会根据需要进行调整。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
有一天,当回顾自己走过的路时,你会发现这些奋斗不息的岁月,才是最美好的人生。——弗洛伊德
今天写一个页面的时候,遇到一个问题
📷
这是一个简单的elementUI的折叠面板
我在自定义标题里加了个el-link标签,执行一个函数,打印一句话
代码
<template>
领取专属 10元无门槛券
手把手带您无忧上云