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 29761f551d
commit 2ca708fd4a
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" /} {extend name="public/nas_base" /}
{block name="title"} {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}
{block name="seo"} {block name="seo"}
{notempty name="article.seo_keywords"} {notempty name="article.seo_keywords"}
<meta name="keywords" content="{$article.seo_keywords}" /> <meta name="keywords" content="{$article.seo_keywords}" />
<meta name="description" content="{$article.seo_desc}" /> <meta name="description" content="{$article.seo_desc}" />
{else /} {else /}
{__BLOCK__} {__BLOCK__}
{/notempty} {/notempty}
{/block} {/block}
{block name="style"} {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}
{block name="main"} {block name="main"}
<div class="orico_Page_index"> <div class="orico_Page_index">
@@ -32,21 +32,46 @@
<div class="nars-hlpdt-ml"> <div class="nars-hlpdt-ml">
{notempty name="article_categorys"} {notempty name="article_categorys"}
<div class="nav-tree"> <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"} {volist name="article_categorys" id="ac"}
<div class="category"> <div class="category">
<div class="category-title"> <div class="category-title">
<div class="arrow {if condition='$ac.id == $Request.get.cid'}rotate{/if}"> <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> </div>
<span>{$ac.name}</span> <span>{$ac.name}</span>
</div> </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"} {volist name="ac.article" id="ar"}
<li> <li>
<a <a href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id, 'id' => $ar.id])}" {eq
href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id, 'id' => $ar.id])}" name="ar.id" value="$Request.get.id" }class="active" {/eq}>
{eq name="ar.id" value="$Request.get.id"}class="active"{/eq}
>
{$ar.title} {$ar.title}
</a> </a>
</li> </li>
@@ -75,10 +100,22 @@
{block name="script"} {block name="script"}
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
// 一级菜单点击事件
$('.category-title').click(function () { $('.category-title').click(function () {
$(this).next('.sub-list').slideToggle(); $(this).next('.sub-list').slideToggle();
$(this).find('.arrow').toggleClass('rotate'); $(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) { $(document).on('click', function (e) {
var target = $(e.target); var target = $(e.target);

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

@@ -257,4 +257,28 @@
all: revert; all: revert;
/* 将所有属性设置为初始值 */ /* 将所有属性设置为初始值 */
/* 或者使用 all: revert; 恢复到浏览器默认样式，但该属性兼容性不如 initial */ /* 或者使用 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;
}