Joe主题美化教程四: 移动样式下添加二级分类

二级分类

joe 主题在移动样式下,目录分类居然不支持多级,所有分类并排成一列,让人欲哭无泪(主要是分类太多了),于是决定做个小手术,支持一下二级分类。

1. 代码

修改header.php 相关j-sidebar-xs中的部分,主要是替换下面这一部分

<div class="card">
    <div class="title">类目归类</div>
    <ul class="category-nav">
        <?php while ($categorys->next()) : ?>
            <?php $children = $categorys->getAllChildren($categorys->mid); ?>
            <?php if ($categorys->levels === 0): ?>
                <?php if (empty($children)): ?>
                    <li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'>
                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
                        </svg>
                        <a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?></a>
                    </li>
                <?php else: ?>
                    <li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'>
                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
                        </svg>
                        <a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?>
                            <span><i class="icon iconfont icon-Chevronrighticon text-right"></i><i class="icon iconfont icon-Chevrondownicon text-down"></i></span>
                        </a>
                        <ul>
                            <?php foreach ($children as $mid):?>
                                <?php $child = $categorys->getCategory($mid); ?>
                                <li <?php if($this->is('category', $child['slug'])): ?> class="active"<?php endif; ?>>
                                    <a href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                <?php endif; ?>
            <?php endif; ?>
        <?php endwhile; ?>
    </ul>
</div>

2. 添加js 控制

$('.j-sidebar-xs .item.category ul li a').unbind().bind('click',function (ev) {
                let c = $(this);
                c.parent().siblings(".active").toggleClass("active")
                if(c.next().is("ul") && c.parent().toggleClass("active") && ev.preventDefault()) return false;
            })

3. 添加css

yi下为scss样式

.item.category{
ul.category-nav li ul{
    display: none;
    padding-left: 2.5em;
    opacity: 0;
    height: 0;
    overflow: auto;
    -webkit-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
    li:last-child{
        border-bottom: none;
    }
}
ul.category-nav li a {
    span{
        float: right;
    }
    .text-down{
        display: none;
    }
}

ul.category-nav li.active {
    ul {
        display: block;
        opacity: 1;
        height: auto;
    }
    a .text-right{
        display: none;
    }
    a .text-down{
        display: block;
    }
}
}
.j-sidebar-xs .content .item .card ul li {
    display: block; <!--将原来的flex改为block-->
}

给TA打赏
共{{data.count}}人
人已打赏
建站教程技术活

Joe主题美化教程三: 添加author page

2020-12-17 19:43:10

建站教程技术活

Joe主题教程: 接入tepass 打赏及付费

2020-12-18 16:38:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索