首页 > Web开发 > 详细

jquery: 菜单展开合并

时间:2020-06-23 00:34:22      阅读:109      评论:0      收藏:0      [点我收藏+]

html:

<div class="knowledge-left fl">
                    <div class="menu-item down">
                        <a href="javascript:;" class="sub-title">买房准备</a>
                        <ul>
                            <li>
                                <a href="" class="actived">购房资格</a>
                                <a href="">购房能力</a>
                            </li>
                            <li>
                                <a href="">购房政策</a>
                                <a href="">交易流程</a>
                            </li>
                        </ul>
                    </div>
                    <div class="menu-item right">
                        <a href="javascript:;" class="sub-title">看房选房</a>
                        <ul>
                            <li>
                                <a href="">选新房技巧</a>
                                <a href="">选二手房技巧</a>
                            </li>
                            <li>
                                <a href="">选教育地产技巧</a>
                                <a href="">建筑类型</a>
                            </li>
                        </ul>
                    </div>
                </div>

js:

<script>
    $(document).ready(function () {
        $(.menu-item .sub-title).each(function (index) {
            $(this).click(function () {
                let _this = $(this);
                let _parent = _this.parent();
                let _siblings = _this.siblings(ul);
                if (_parent.hasClass(down)) {
                    _parent.removeClass(down);
                    _parent.addClass(right);
                    _siblings.hide();
                } else {
                    _parent.removeClass(right);
                    _parent.addClass(down);
                    _siblings.show();
                }
            })
        })
    });
</script>

css:

.knowledge-left .menu-item {
        margin-top: 20px;
    }

    .knowledge-left .menu-item .sub-title {
        padding-left: 16px;
        font-size: 16px;
        font-weight: bold;
        color: #333;

    }

    .knowledge-left .menu-item.down .sub-title {
        background: url("//static.fczx.com/www/assets/icons/triangle-down.png") no-repeat left center;
    }

    .knowledge-left .menu-item.right .sub-title {
        background: url("//static.fczx.com/www/assets/icons/triangle-right.png") no-repeat left center;
    }

    .knowledge-left .menu-item.right ul {
        display: none;
    }

    .knowledge-left .menu-item ul {
        padding-left: 16px;
        margin-top: 15px;
    }

    .knowledge-left .menu-item ul>li>a {
        display: inline-block;
        min-width: 140px;
        font: 14px/30px "Miscrosoft Yahei";
        color: #666;
    }

    .knowledge-left .menu-item ul>li>a:hover {
        color: #df2f30;
    }

    .knowledge-left .menu-item ul>li>a.actived {
        color: #df2f30;
        font-weight: bold;
    }

 

jquery: 菜单展开合并

原文:https://www.cnblogs.com/Nyan-Workflow-FC/p/13179660.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!