zoukankan      html  css  js  c++  java
  • jquery手风琴

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title></title>
    
            <script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    
            <script type="text/javascript">
                // 入口函数
                $(document).ready(function() {
                    var jqSpan = $("span");
    
                    jqSpan.click(function() {
                        $(this).next().show();
                        $(this).parent().siblings("li").find("div").hide();
                    })
                });
            </script>
    
            <style type="text/css">
                ul {
                    list-style: none;
                }
    
                li div {
                    display: none;
                    height: 100px;
                }
    
                li {
                    border: 1px solid;
                     200px;
                }
            </style>
        </head>
        <body>
            <ul>
                <li>
                    <span id="">
                        标题1
                    </span>
                    <div id="">
                        我是弹出来的
                    </div>
                </li>
                <li>
                    <span id="">
                        标题2
                    </span>
                    <div id="">
                        我是弹出来的
                    </div>
                </li>
                <li>
                    <span id="">
                        标题3
                    </span>
                    <div id="">
                        我是弹出来的
                    </div>
                </li>
                <li>
                    <span id="">
                        标题4
                    </span>
                    <div id="">
                        我是弹出来的
                    </div>
                </li>
            </ul>
        </body>
    </html>
    image
  • 相关阅读:
    Java基础知识
    jQuery的表单操作
    SSM——查询_分页
    jQuery实现查看删除
    SSM之Maven工程的搭建
    Mybatis使用@Param
    Mybatis简单的CURD
    Mybatis使用接口开发
    初入Mybatis
    SQL语句
  • 原文地址:https://www.cnblogs.com/zhangxuechao/p/13798728.html
Copyright © 2011-2022 走看看