[英]How do I conditionally apply CSS to a class if a different class is present?
我在视图中有以下内容:
<div class="bottom-nav container-fluid">
<div class="container">
<div class="row mobile-menu-row">
<div class="col"></div>
</div>
<div class="row mobile-menu-row">
<div class="slidedown"></div>
</div>
Slidedown和Slideup都存在,具体取决于用户点击按钮。 目前我有一个440px的高度应用于底部导航是巨大的,如果存在Slidedown并且屏幕尺寸低于768px,实际上只希望出现在底部导航。 如果出现类,是否只在其他类上应用CSS样式的建议?
我试过的尝试肯定不起作用:
@media and (max-width: 767px) {
.bottom-nav .slidedown{
height: 440px;
}
}
这自然不起作用,因为它将它应用于滑动而不是底部导航部分。
我的JS文件有:
const nav = () => {
const mobileButton = document.querySelector('a.mobile-button');
const menu = document.querySelector('.mobile-menu-cont');
const regionLink = document.querySelector('.mobile-menu-row ul > li');
const regionMenu = document.querySelector('.mobile-menu-row ul > li > ul');
const bottom = document.getElementsByClassName('bottom-nav');
function init() {
mobileButton.addEventListener('click', toggleMenu);
regionLink.addEventListener('click', toggleSubMenu);
}
let toggleMenu = (e) => {
e.preventDefault();
if (menu.classList.contains('slideup')) {
menu.classList = 'slidedown';
} else {
menu.classList = 'slideup';
}
};
if (menu.classList = 'slidedown'){
bottom.setAttribute("style", "height: 440px;")
} else {
bottom.setAttribute("style","height: 0;")
}
我认为条件会起作用,但它似乎只是打破了页面上的许多不同的东西。
我也尝试过:
let toggleMenu = (e) => {
e.preventDefault();
if (menu.classList.contains('slideup')) {
menu.classList = 'slidedown';
bottom.setAttribute("style", "height: 440px;")
} else {
menu.classList = 'slideup';
bottom.setAttribute("style", "height: inherit;")
}
};
这会在页面上弄乱我的很多其他JS。
你很亲密! 不要压缩bottom
elem的完整样式属性,只需设置height
属性,同样,不要替换menu
的className
,只需添加和减去类名:
let toggleMenu = (e) => {
e.preventDefault();
if (menu.classList.contains('slideup')) {
menu.className = menu.className.replace('slideup', '');
menu.className += ' slidedown';
bottom.style.height = '440px';
} else {
menu.className = menu.className.replace('slidedown', '');
menu.className += ' slideup';
bottom.style.height = 'inherit';
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.