CSS相关 | 问题记录 | 鼠标点击时打开/折叠菜单

问题描述：

学JS的时候，要实现：鼠标点击时打开/折叠菜单
主要方法是JS写一个函数，做到点击某个元素时，给它加上属性 .open
但始终无法做到点击就出现的效果

代码长这样：

<style>
      .menu ul{
          margin: 0;
          list-style: none;
          display: none;
          padding-left: 10px;
      }
      .menu .title {
          font-size: 18px;
          cursor: pointer;
    }
      .menu .title::before{
          content: '▶';
          font-size: 80%;
          color: green;
      }
      .menu.open .title::before{
          content: '▼';
      
      }
      .menu.open ul{
          display: block;
      }        
 </style>

    <div id="c" class="menu">
        <span class="title">Sweeties (click me)!</span>
            <ul>
                <li>Cake</li>
                <li>Donut</li>
                <li>Honey</li>
            </ul>
    </div>

<script>
      let menu=document.getElementById('c');
      let title=menu.querySelector('.title');
      title.onclick=function(){
          
          menu.classList.toggle("open");
          
      };
  </script>

---

原因分析：

啊啊啊啊我太菜搞了好久才弄明白！
css写样式的时候，当鼠标点击，会给menu元素加/减一个open属性，即.menu.open，注意这里两个属性之间没有空格！！！有空格就是父元素子元素的关系，没有空格才代表在同一个元素上添加属性！