cmeelin 2021-11-08 15:57 采纳率: 50%
浏览 69
已结题

实现单一习题答案的滑动显隐效果的网页

我写了一个习题答案的简单网页，反复单击习题选项后面的“提示”字符，可依次产生相应答案的滑动显隐效果（代码模板如下），不过现在还无法做到，任何时候最多只有一个显示答案出现的要求，即显示下一个答案就会自动隐藏上一个答案。烦请高人指点一下应该如何改写（请给出改写结果），谢谢！

思考题
习题1 提示
答案1
习题2 提示
答案2
习题3 提示
答案3

img

  • 写回答

3条回答 默认 最新

  • 言程序plus 2021-11-08 16:50
    关注

    这种方法看对你有用麽

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>手风琴</title>
        <style type="text/css">
            span {

                text-align: center;

                line-height: 40px;

                background-color: tomato;

                color: thistle;

            }



            p {




                display: none;

                height: 300px;

                display: "inline-block",




            }




            section {

                margin: auto;

            }
        </style>
    </head>
    <body>
        <section>

            <div><span>动漫</span>

                <p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    Aspernatur soluta,

                    impedit consequuntur dolore

                    cumque nostrum deserunt totam maxime a? Ab delectus suscipit ducimus harum modi, placeat laborum esse

                    odio voluptatibus.

                    Fugiat rerum alias corrupti, modi vel molestiae vero explicabo magni suscipit distinctio perferendis

                    eligendi consequatur assumenda dolores reiciendis consequuntur quaerat. Asperiores totam modi veniam,

                    dolores aspernatur enim aut et laudantium!

                    Exercitationem expedita impedit inventore quod veniam neque harum, eveniet consequuntur cum rerum sunt

                    nobis similique! Commodi, autem magnam. Maiores dicta aliquid numquam! Vel labore repellat sapiente eum

                    laudantium quae impedit!

                    Veritatis, omnis sint? Accusantium rerum ipsa neque dignissimos vel nisi enim veniam ducimus praesentium

                    id. Corrupti explicabo quaerat eaque dolore quod officiis assumenda illo dicta nostrum, quas, recusandae

                    nemo autem!

                    Repellendus corporis ad omnis eaque, labore asperiores, excepturi obcaecati vero, maxime ut nam magnam?

                    Rerum pariatur veritatis, labore ab consequuntur adipisci? Itaque dolorem ut placeat velit quos voluptas

                    cum exercitationem.

                    Accusamus et labore qui consectetur, deserunt at illum suscipit in minima, veniam vel sunt fuga quam

                    cumque amet recusandae consequatur delectus quas iure. Vero odit quae amet, asperiores eius sed.

                    Itaque, quo quae nihil accusamus, dolorem nisi quasi doloremque sapiente, similique non eligendi. Quia

                    quasi eum, molestias quas odit, temporibus sit consequatur fugiat sapiente, ex distinctio libero dolor

                    tempora hic?

                    Accusamus facilis debitis quia delectus non deserunt, sequi, blanditiis distinctio laborum quisquam

                    veritatis ipsa at reprehenderit dolore ducimus vitae dolorum architecto ipsum alias totam optio harum

                    temporibus omnis. Doloremque, suscipit.

                    A ducimus aliquid non neque quasi quas, animi expedita illo possimus, reprehenderit consequatur?

                    Quisquam maiores tenetur labore voluptatum suscipit maxime laborum nisi laudantium aspernatur aperiam.

                    Atque iure laudantium numquam. Et.

                    Architecto unde totam suscipit perspiciatis? Quidem quas necessitatibus, non dolorem dignissimos animi

                    in cupiditate fuga consequatur cumque quis deleniti natus laboriosam quia praesentium optio ex,

                    explicabo blanditiis quam? Eligendi, eos.</p>

            </div>

            <div><span>电影</span>

                <p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. A

                    error, molestias earum

                    labore officiis voluptate non voluptatibus impedit beatae cumque, ea rerum minima id eius nam delectus

                    suscipit eos similique!</p>

            </div>

            <div><span>电视</span>

                <p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. A

                    error, molestias earum

                    labore officiis voluptate non voluptatibus impedit beatae cumque, ea rerum minima id eius nam delectus

                    suscipit eos similique!</p>

            </div>

            <div><span>英语</span>

                <p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. A

                    error, molestias earum

                    labore officiis voluptate non voluptatibus impedit beatae cumque, ea rerum minima id eius nam delectus

                    suscipit eos similique!</p>

            </div>

        </section>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

        <script>
            $("section").css({

                width: 800 + "px",

                height: 500 + "px",

                border: "1px solid red"

            })

            $("span").css({

                width: 800 + "px",

                height: 40 + "px",

                border: "1px solid red",

                display: "inline-block",

            })

            $("section").on("click", "span", function() {

                let next = $(this).next();

                next.slideToggle("slow");

                $("p").not(next).slideUp();

            })
        </script>
    </body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 11月16日
  • 已采纳回答 11月8日
  • 修改了问题 11月8日
  • 创建了问题 11月8日

悬赏问题

  • ¥20 数学建模，尽量用matlab回答，论文格式
  • ¥15 昨天挂载了一下u盘，然后拔了
  • ¥30 win from 窗口最大最小化，控件放大缩小，闪烁问题
  • ¥20 易康econgnition精度验证
  • ¥15 msix packaging tool打包问题
  • ¥28 微信小程序开发页面布局没问题，真机调试的时候页面布局就乱了
  • ¥15 python的qt5界面
  • ¥15 无线电能传输系统MATLAB仿真问题
  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行，主要想实现类似于traceroute的一定步长内的路由拓扑功能