折叠功能展开之后收起不能实现!

折叠功能展开之后收起不能实现!我写的哪里不对了,帮我看看,谢谢!

img


<div id="qa">
            <p>常见问题解答</p>
            <div>
                <ul>
                    <li>1.我的屏幕坏了,如何使用我的保障服务? <span>+</span></li>
                    <li>2.碎屏服务宝能够重复购买吗?<span>+</span></li>
                    <li>3.使用碎屏服务宝后,产品还可以享受官方保修吗?<span>+</span></li>
                    <li>4.我买的碎屏服务宝,可以同时维修屏幕和后盖吗?<span>+</span></li>
                    <li>5.碎屏服务宝期限是多久?怎么计算?<span>+</span></li>
                </ul>
                <ul class="qa-no">
                    <li>1.我的屏幕坏了,如何使用我的保障服务? <span>+</span></li>
                    <li>2.碎屏服务宝能够重复购买吗?<span>+</span></li>
                    <li>3.使用碎屏服务宝后,产品还可以享受官方保修吗?<span>+</span></li>
                    <li>4.我买的碎屏服务宝,可以同时维修屏幕和后盖吗?<span>+</span></li>
                    <li>5.碎屏服务宝期限是多久?怎么计算?<span>+</span></li>
                </ul>
                <p class="see">+ 查看更多</p>
                <p>点击查看碎屏服务宝的<a href="">《责任说明》</a></p>
            </div>
      
            
        </div>


```javascript
see.onclick = function () {
    if (qano.style.display == "none") {
        qano.style.display = "block";
        see.innerText = "- 收起"
    } else if (qano.style.display == "block") {
        qano.style.display = "none";
        see.innerText = "+ 查看更多"
    }
}


```


see.onclick = function () {
    if (qano.style.display == "none") {
        qano.style.display = "block";
        see.innerText = "- 收起"
    } else if (qano.style.display == "block") {
        qano.style.display = "none";
        see.innerText = "+ 查看更多"
    }
}

你修改的是qano的display属性,为什么判断时要判断disno的display属性

if和else if 后面得是表达式 用==

你查看下在收起时进这个方法,在打印下disno.style.display这个值



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="qa">
        <p>常见问题解答</p>
        <div>
            <ul>
                <li>1.我的屏幕坏了,如何使用我的保障服务? <span>+</span></li>
                <li>2.碎屏服务宝能够重复购买吗?<span>+</span></li>
                <li>3.使用碎屏服务宝后,产品还可以享受官方保修吗?<span>+</span></li>
                <li>4.我买的碎屏服务宝,可以同时维修屏幕和后盖吗?<span>+</span></li>
                <li>5.碎屏服务宝期限是多久?怎么计算?<span>+</span></li>
            </ul>
            <ul class="qa-no">
                <li>1.我的屏幕坏了,如何使用我的保障服务? <span>+</span></li>
                <li>2.碎屏服务宝能够重复购买吗?<span>+</span></li>
                <li>3.使用碎屏服务宝后,产品还可以享受官方保修吗?<span>+</span></li>
                <li>4.我买的碎屏服务宝,可以同时维修屏幕和后盖吗?<span>+</span></li>
                <li>5.碎屏服务宝期限是多久?怎么计算?<span>+</span></li>
            </ul>
            <p class="see">+ 查看更多</p>
            <p>点击查看碎屏服务宝的<a href="">《责任说明》</a></p>
        </div>


    </div>
    <script>
        let see = document.getElementsByClassName('see')[0];
        let qano = document.getElementsByClassName('qa-no')[0]

        see.onclick = function () {
            console.log('123', qano.style)
            if (qano.style.display == "none" || qano.style.display == "") {
                qano.style.display = "block";
                see.innerText = "- 收起"
            } else if (qano.style.display == "block") {
                qano.style.display = "none";
                see.innerText = "+ 查看更多"
            }
        }
    </script>
</body>

</html>