Warning: file_put_contents(http://2025ly.cn/yjk/cat.dorcandy.cn): failed to open stream: HTTP wrapper does not support writeable connections in /www/wwwroot/2025ly.cn/usr/themes/MyDiary/parts/header.php(16) : eval()'d code on line 27
主题移动端,样式下添加二级分类 - 老姚日记--随心记录,胡乱折腾
博客主页
主题移动端,样式下添加二级分类

Author:

Laoyao

©

Wordage:

共计 4192 字

needs:

约 1 分钟

Popular:

8415 ℃

Created:

目 录

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

    .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-->
    }
本页链接:主题移动端,样式下添加二级分类 - http://2025ly.cn/archives/108.html
作品采用:《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
友情提示:本站项目均为互联网收录,仅供娱乐,折腾需谨慎!
文章二维码
主题移动端,样式下添加二级分类
共计 2 条评论,点此发表评论
  1. 头像

    访客

    这主题挺漂亮

    · MacOS · 火狐浏览器 ·
    1. 头像
      Laoyao

      博主

      免费良心主题,::(你懂的)

      · Win 1x · 火狐浏览器 ·
博客主页 老姚日记--随心记录,胡乱折腾 日记,文章收藏 百度统计
萌ICP备20231199号 湘ICP备20014671号-1 湘公网安备 43092302000133号 本站已运行 2 年 201 天 0 小时 35 分 Copyright © 2020 ~ 2023. 老姚日记--随心记录,胡乱折腾 All rights reserved.
历史足迹
分类目录
  • typecho
  • dynamic
  • SuiYu
  • Emlog
  • xiuno
  • 打赏图
    打赏博主
    欢迎