主页 / 问题 / 704613
Accepted
kot_mapku3
Asked:2020-08-11 01:12:15 +0000 UTC2020-08-11 01:12:15 +0000 UTC

为什么类没有被添加到元素中？

  • 772

有这个代码：

    <ul class="cube-list" id="cube-list">
        <li class="blog"><a href="index.html">Blog</a></li>
        <li class="about"><a href="about.hmtl">About</a></li>
        <li class="login"><a href="login.html">Log in</a></li>
    </ul>

以及它的样式（sass，我编译成css），理论上应该通过js添加：

.menu-for-mobile-opened
  position: absolute
  display: block
  width: 100%
  background-color: rgba(185, 174, 128, 1)
  text-align: center
  li 
      display: block

js 本身：

var cubeList = document.getElementById("cube-list");

var cube = document.getElementById("cube");
cube.addEventListener("click", function(){
  //alert(this.style.display)
  cube.style.display = (cube.style.display == 'none') ? 'block' : 'none';
  //if (this.style.display == 'none')
      //cubeList.classList.remove('menu-for-mobile-opened');
  //else
      cubeList.classList.add("menu-for-mobile-opened");
});

结果，添加了类，但元素（列表 ul）没有任何变化。问题是什么？

html

2 个回答

  1. Best Answer

    例如，如果立方体是用于更改样式的按钮，那么一切正常

    var cubeList = document.getElementById("cube-list");

var cube = document.getElementById("cube");
cube.addEventListener("click", function(){
  cube.style.display = (cube.style.display == 'none') ? 'block' : 'none';
  cubeList.classList.add("menu-for-mobile-opened");
});
    .menu-for-mobile-opened {
  position: absolute;
  display: block;
  width: 100%;
  background-color: rgba(185, 174, 128, 1);
  text-align: center;
  }
 .menu-for-mobile-opened li {
      display: block
      }
     <button id="cube">cube</button>
 <ul class="cube-list" id="cube-list">
        <li class="blog"><a href="index.html">Blog</a></li>
        <li class="about"><a href="about.hmtl">About</a></li>
        <li class="login"><a href="login.html">Log in</a></li>
    </ul>

    • 2

  2. 一般来说，问题是如果创建页面时没有使用该类，那么在编译sass时它不会添加到css文件中。

    • 0

相关问题