要实现这个逻辑,我们可以使用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'); }
});