jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

帮助中心文档三级菜单

Browse Source
This commit is contained in:
liangjiami
2025-09-18 11:21:50 +08:00
parent 629f7457d3
commit f6e37d33f8
2 changed files with 76 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/index/view/pc/topic_nas/help_detail.html
View File

@@ -1,17 +1,17 @@
{extend name="public/nas_base" /}
{block name="title"}
{notempty name="article.seo_title"}<title>{$article.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{notempty name="article.seo_title"}<title>{$article.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
{notempty name="article.seo_keywords"}
<meta name="keywords" content="{$article.seo_keywords}" />
<meta name="description" content="{$article.seo_desc}" />
{else /}
{__BLOCK__}
{/notempty}
{notempty name="article.seo_keywords"}
<meta name="keywords" content="{$article.seo_keywords}" />
<meta name="description" content="{$article.seo_desc}" />
{else /}
{__BLOCK__}
{/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css"/>
<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css" />
{/block}
{block name="main"}
<div class="orico_Page_index">
@@ -32,21 +32,46 @@
<div class="nars-hlpdt-ml">
{notempty name="article_categorys"}
<div class="nav-tree">
<!-- start 三级菜单的测试代码 可删-->
<div class="category">
<!-- 一级 -->
<div class="category-title">
<div class="arrow"><img src="helpImg/nars-jt.png" class="arrow" /></div>
<span>初次使用</span>
</div>
<!-- 二级-->
<ul class="sub-list">
<li class="two-mues">
<a href="#" class="two-a">
<div class="arrow"><img src="helpImg/nars-jt.png" class="arrow" /></div>
<span>我是二级</span>
</a>
<!-- 三级-->
<ul class="thress-mues">
<li><a href="#" style="padding-top: 6px;padding-left: 30px;">我是三级？</a></li>
</ul>
</li>
<li><a href="#" style="padding-top: 6px;">拿到产品后我该如何安装使用？</a></li>
<li><a href="#">APP无法下载/下载失败怎么办？</a></li>
</ul>
</div>
<!-- end 三级菜单的测试代码 可删-->
{volist name="article_categorys" id="ac"}
<div class="category">
<div class="category-title">
<div class="arrow {if condition='$ac.id == $Request.get.cid'}rotate{/if}">
<img src="__IMAGES__/nas-jt.png" class="arrow {if condition='$ac.id == $Request.get.cid'}rotate{/if}" />
<img src="__IMAGES__/nas-jt.png"
class="arrow {if condition='$ac.id == $Request.get.cid'}rotate{/if}" />
</div>
<span>{$ac.name}</span>
</div>
<ul class="sub-list" {if condition='$ac.id == $Request.get.cid'}style="display: block;"{/if}>
<ul class="sub-list" {if condition='$ac.id == $Request.get.cid' }style="display: block;" {/if}>
{volist name="ac.article" id="ar"}
<li>
<a
href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id, 'id' => $ar.id])}"
{eq name="ar.id" value="$Request.get.id"}class="active"{/eq}
>
<a href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id, 'id' => $ar.id])}" {eq
name="ar.id" value="$Request.get.id" }class="active" {/eq}>
{$ar.title}
</a>
</li>
@@ -75,10 +100,22 @@
{block name="script"}
<script type="text/javascript">
$(document).ready(function () {
// 一级菜单点击事件
$('.category-title').click(function () {
$(this).next('.sub-list').slideToggle();
$(this).find('.arrow').toggleClass('rotate');
});
// 二级菜单点击事件
$('.two-a').click(function(e) {
e.preventDefault();
e.stopPropagation(); // 阻止事件冒泡
// 切换当前二级菜单的箭头方向
$(this).find('.arrow').toggleClass('rotate');
// 切换对应的三级菜单显示/隐藏
$(this).siblings('.thress-mues').slideToggle();
});
// 搜索
$(document).on('click', function (e) {
var target = $(e.target);

24
public/static/index/pc/css/topic_nas_help-detail.css
View File

@@ -258,3 +258,27 @@
/* 将所有属性设置为初始值 */
/* 或者使用 all: revert; 恢复到浏览器默认样式，但该属性兼容性不如 initial */
}
/*9.18 添加三级样式*/
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list .two-mues{
position: relative;
}
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list .two-mues .two-a{
position: relative;
padding-top: 6px;
padding-bottom: 0.375rem;
display: flex;
font-size: 14px !important;
flex-direction: row;
}
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list .two-mues .two-a:hover{
border-bottom:none;
}
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list .thress-mues{
display: none;
}
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list .thress-mues .thress-mues a{
padding-top: 0.375rem;
padding-left: 1.875rem;
}