搜索到
1
篇与
的结果
-
主题移动端，样式下添加二级分类 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--> }
