Question

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

onclick菜单应该按其应有的方式切换，但所有元素均未设置样式，我不知道它是否与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类时，来自display:none的原始.admin_side_bar仍然优先。如果您只想显示导航，则可以使用x.style.display = "block";类来display:none覆盖admin_side_bar

x.style.display="block"之所以起作用，是因为它添加了内联样式，这是CSS的最高特异性（它会覆盖所有其他CSS规则）。

来自CSS specificity

添加到元素的内嵌样式（例如style =“ font-weight：bold”）始终会覆盖外部样式表中的任何样式，因此可以认为具有最高的特异性。

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>

Javascript切换有效，但显示无样式菜单

1 个答案: