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，注意这里两个属性之间没有空格！！！有空格就是父元素子元素的关系，没有空格才代表在同一个元素上添加属性！

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，注意这里两个属性之间没有空格！！！有空格就是父元素子元素的关系，没有空格才代表在同一个元素上添加属性！