要实现这个逻辑,我们可以使用JavaScript(配合CSS)来根据侧边栏(我们假设是一个具有特定ID或类的DOM元素)的内容或值来决定其宽度。
HTML
假设你的侧边栏有一个ID为sidebar
:
<div id="sidebar">
<!-- 侧边栏的内容 -->
<!-- 这里可能根据情况有内容或没有内容 -->
</div>
CSS
#sidebar {
width: 180px; /* 默认宽度 */
/* 其他样式 */
}
.fill-width {
width: 100%; /* 填满宽度 */
/* 可能还需要其他样式来确保正确布局 */
}
JavaScript
document.addEventListener('DOMContentLoaded', function() {
var sidebar = document.getElementById('sidebar');
// 假设我们根据内容是否为空来判断
if (sidebar.textContent.trim() === '') {
// 如果没有内容,添加填满宽度的类
sidebar.classList.add('fill-width');
} else {
// 如果有内容,移除填满宽度的类(可选,因为默认就是180px)
sidebar.classList.remove('fill-width');
}
});