Javascript 切换工作但显示无样式的菜单

Question

在我的 ruby​​ on rails 5 应用程序上，我有一个菜单按钮，它使用 javascript 来切换菜单，切换功能显示和隐藏菜单，但菜单不再使用 css 样式

点击菜单会像它应该的那样切换，但所有元素都没有样式，我不知道它是否与 rails 相关，或者我在这里遗漏了什么

//Toggle between adding and removing the "show_for_mobile" class to admin_side_bar when the user clicks on the icon
function toggleNav() {
  var x = document.getElementById("admin_side_bar");
  console.log(x.className)
  if (x.className === "admin_side_bar") {
    x.className += "show_for_mobile";
  } else {
    x.className = "admin_side_bar";
  }
}

.admin_side_bar {
  width: 70%;
  height: 50vh;
  background-color: #e2e6e8;
  position: absolute;
  left: 0;
  top: 60px;
  padding: 20px 10px;
  display: none;
}

//show side bar on click
.show_for_mobile {
  display: block;
}

.admin_side_bar>ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.admin_side_bar>ul>a {
  color: #3d3d3d;
  font-size: 19px;
  text-decoration: none;
}

.admin_side_bar>ul>a:hover {
  color: #06bed3;
}

.admin_side_bar .fas {
  margin-right: 20px;
  color: #afaeae;
}

.admin_side_bar .fas:hover {
  color: #7a7a7a;
}

.admin_side_bar>ul>a>li {
  margin-bottom: 20px;
}

<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
  <ul>
    <a href="#">
      <li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
    </a>
    <a href="#">
      <li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
    </a>
    <a href="#">
      <li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
    </a>
    <a href="#">
      <li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
    </a>
    <a href="#">
      <li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
    </a>
  </ul>
</div>

Answer 1

当您添加 .show_for_mobile 类时，.admin_side_bar 中的原始 display:none 仍然优先。如果您真正想要做的只是显示导航，那么您可以使用 x.style.display = "block"; 覆盖 admin_side_bar 中的 display:none 类

x.style.display="block" 之所以有效，是因为它添加了最高 CSS 特异性的内联样式(它会覆盖所有其他 css 规则)。

来自 CSS specificity

Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

document.getElementById("toggleButton").addEventListener("click", toggleNav);
//Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon
function toggleNav() {
  var x = document.getElementById("admin_side_bar");
  if (x.className === "admin_side_bar") {
    x.className += " show_for_mobile";
    x.style.display = "block";
  } else {
    x.className = "admin_side_bar";
    x.style.display = "none";
  }
}

.admin_side_bar {
  width: 70%;
  height: 50vh;
  background-color: #e2e6e8;
  position: absolute;
  left: 0;
  top: 60px;
  padding: 20px 10px;
  display: none;
}

//show side bar on click
.show_for_mobile {
  display: block !important;
}

.admin_side_bar>ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.admin_side_bar>ul>a {
  color: #3d3d3d;
  font-size: 19px;
  text-decoration: none;
}

.admin_side_bar>ul>a:hover {
  color: #06bed3;
}

.admin_side_bar .fas {
  margin-right: 20px;
  color: #afaeae;
}

.admin_side_bar .fas:hover {
  color: #7a7a7a;
}

.admin_side_bar>ul>a>li {
  margin-bottom: 20px;
}

<button id="toggleButton">Toggle Nav</button>
<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
  <ul>
    <a href="#">
      <li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
    </a>
    <a href="#">
      <li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
    </a>
    <a href="#">
      <li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
    </a>
    <a href="#">
      <li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
    </a>
    <a href="#">
      <li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
    </a>
  </ul>
</div>