javascript - 如果存在不同的类，我如何有条件地将 CSS 应用于类？

Question

我在 View 中有以下内容:

<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。

Answer 1

你很接近!不要压缩 bottom 元素的完整样式属性，只需设置 height 属性，同样，不要替换 的 className >menu，只需在类名上加减即可:

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';
  }
};