标签 jquery 下的文章

jquery 书写折叠菜单和手风琴效果

注意点: jquery + less 写的, 如果看不了的话 ,把 jquery和less 文件都重新引入一下 .

最好使用手机端查看 ,或者浏览器按F12 手机模式查看效果更佳

完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/less">
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            background: #f8f8f8;
            font-size: 14px;
        }

        .yam-wrap-title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: transparent;
            text-align: center;
        }

        /*折叠面板*/
        .yam-fold-panel {
            .yam-fold-panel-title {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fff;
                padding: 0 20px;
                box-sizing: border-box;
                border-bottom: 1px solid #f1f1f1;
                i {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                }
            }
            .yam-fold-panel-content {
                width: 100%;
                display: none;
                li {
                    width: 100%;
                    min-height: 40px;
                    line-height: 30px;
                    padding: 0 20px;
                    box-sizing: border-box;
                    background: #fcfcfc;
                    border-bottom: 1px solid #f1f1f1;
                    div {
                        font-size: 12px;
                        color: #969799;
                    }
                }
            }
        }

        /*手风琴*/
        .yam-accordion-panel {
            .yam-accordion-panel-title {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fff;
                padding: 0 20px;
                box-sizing: border-box;
                border-bottom: 1px solid #f1f1f1;
                i {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                }
            }
            .yam-accordion-panel-content {
                width: 100%;
                display: none;
                li {
                    width: 100%;
                    min-height: 40px;
                    line-height: 30px;
                    padding: 0 20px;
                    box-sizing: border-box;
                    background: #fcfcfc;
                    border-bottom: 1px solid #f1f1f1;
                    div {
                        font-size: 12px;
                        color: #969799;
                    }
                }
            }
        }

        /*手风琴效果*/
    </style>
    <script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>
</head>
<body>
<div class="yam-wrap">
    <p class="yam-wrap-title">折叠面板效果</p>
    <div class="yam-fold-panel">
        <div class="yam-fold-panel-title">折叠面板<i>
            <svg t="1569324817464" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3248" width="14" height="14">
                <path d="M797.6589 486.1384 414.7028 73.6171H238.01538420026444l382.9551 412.5213-382.9551 382.9404h176.68844945769544L797.6589 486.1384zM797.6589 486.1384"
                      fill="#515151" p-id="3249"></path>
            </svg>
        </i></div>
        <ul class="yam-fold-panel-content">
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
        </ul>
    </div>
    <div class="yam-fold-panel">
        <div class="yam-fold-panel-title">折叠面板<i>
            <svg t="1569324817464" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3248" width="14" height="14">
                <path d="M797.6589 486.1384 414.7028 73.6171H238.01538420026444l382.9551 412.5213-382.9551 382.9404h176.68844945769544L797.6589 486.1384zM797.6589 486.1384"
                      fill="#515151" p-id="3249"></path>
            </svg>
        </i></div>
        <ul class="yam-fold-panel-content">
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
        </ul>
    </div>
    <div class="yam-fold-panel">
        <div class="yam-fold-panel-title">折叠面板<i>
            <svg t="1569324817464" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3248" width="14" height="14">
                <path d="M797.6589 486.1384 414.7028 73.6171H238.01538420026444l382.9551 412.5213-382.9551 382.9404h176.68844945769544L797.6589 486.1384zM797.6589 486.1384"
                      fill="#515151" p-id="3249"></path>
            </svg>
        </i></div>
        <ul class="yam-fold-panel-content">
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
        </ul>
    </div>
    <p class="yam-wrap-title">手风琴效果</p>
    <div class="yam-accordion-panel">
        <div class="yam-accordion-panel-title">手风琴<i>
            <svg t="1569324817464" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3248" width="14" height="14">
                <path d="M797.6589 486.1384 414.7028 73.6171H238.01538420026444l382.9551 412.5213-382.9551 382.9404h176.68844945769544L797.6589 486.1384zM797.6589 486.1384"
                      fill="#515151" p-id="3249"></path>
            </svg>
        </i></div>
        <ul class="yam-accordion-panel-content">
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
            <li>
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
        </ul>
    </div>
    <div class="yam-accordion-panel">
        <div class="yam-accordion-panel-title">手风琴<i>
            <svg t="1569324817464" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3248" width="14" height="14">
                <path d="M797.6589 486.1384 414.7028 73.6171H238.01538420026444l382.9551 412.5213-382.9551 382.9404h176.68844945769544L797.6589 486.1384zM797.6589 486.1384"
                      fill="#515151" p-id="3249"></path>
            </svg>
        </i></div>
        <ul class="yam-accordion-panel-content">
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
            <li>
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
        </ul>
    </div>
    <div class="yam-accordion-panel">
        <div class="yam-accordion-panel-title">手风琴<i>
            <svg t="1569324817464" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3248" width="14" height="14">
                <path d="M797.6589 486.1384 414.7028 73.6171H238.01538420026444l382.9551 412.5213-382.9551 382.9404h176.68844945769544L797.6589 486.1384zM797.6589 486.1384"
                      fill="#515151" p-id="3249"></path>
            </svg>
        </i></div>
        <ul class="yam-accordion-panel-content">
            <li class="yam-fold-panel-content-item">
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
            <li>
                <div class="yam-content-text">代码是写出来给人看的,附带能在机器上运行</div>
            </li>
        </ul>
    </div>
</div>

<script src="jquery.js"></script>
<script>
    // 封装用法
    /*
    使用方法
    clickEl         需要点击的元素     (.hui-fold-panel-title)
    foldPanelEl     需要展开的元素     (.hui-fold-panel-content)
    isAccordion     是否需要手风琴效果  (Boolean)
    */
    foldPanel(".yam-fold-panel-title", ".yam-fold-panel-content", false);
    foldPanel(".yam-accordion-panel-title", ".yam-accordion-panel-content", true);

    function foldPanel(clickEl, foldPanelEl, isAccordion) {
        $(clickEl).each(function (index, foldPanel) {
            let isRotate = false;
            $(foldPanel).click(function () {
                $(this).parent().find(foldPanelEl).slideToggle(500);
                if (!isRotate) {
                    $(this).find("i").css({
                        transform: "rotate(90deg)",
                        transition: "all 0.5s"
                    });
                    isRotate = true;
                } else {
                    $(this).find("i").css({
                        transform: "rotate(0deg)",
                        transition: "all 0.5s"
                    });
                    isRotate = false;
                }
                //手风琴效果
                if (isAccordion) {
                    $(this).parent().siblings().find(foldPanelEl).slideUp()
                }
            });
        })
    }
</script>
</body>
</html>

效果展示:

点击图片可查看gif效果

 

//预览地址: 预览地址

jquery–load因为文件的写法

如果使用jquery的load引入文件的写法,应该注意

在load中只能引入index和css ,而js则需要在回调函数中来添加

废话不多说, 贴代码

<!--尾部 Start-->
<div class="footer-in"></div>
<!--尾部 End-->
<!--样式代码 End-->
<link rel="stylesheet" href="./../common/css/footer.css">
<!--样式代码 End-->

如上面代码所展示的一样 ,  在引入的html文件中 ,只能存在 html代码和css代码

而js代码的引入方式如下

 $(".footer").load("./../common/footer.html",function(){
        //当加载的内容被添加后 ,执行
        let sc = document.createElement("script");
        sc.src = "./../common/js/footer.js";
        document.body.appendChild(sc);
    });

 

扫码使用手机查看

站点统计

  • 文章总数:66 篇
  • 页面总数:8 个
  • 评论总数:4196 条
  • 分类总数:4 个
  • 标签总数:19 个
  • 运行天数:135 天

你凭什么不努力,但又什么都想要~


「温馨提醒您」: 代码千万行,注释第一行。命名不规范,同事泪千行。

阅读统计

  • 9534总阅览数:
  • 11今天阅读数量:
  • 10今天访问者数:

近期文章

文章归档

分类目录

标签云

© 2020 - Sitemap - Privacy Policy