orico-official-website/app/index/view/pc/topic_nas/help_detail.html

{extend name="public/nas_base" /}
{block name="title"}
{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}
{/block}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css" />
{/block}
{block name="main"}
<div class="orico_Page_index">
    <div class="narshelpdetailPc">
        <!-- top 搜索-->
        <div class="narsssmain">
            <div class="ml">{:lang_i18n('帮助中心')}/{:lang_i18n('使用教程')}</div>
            <div class="nars-hlp-search">
                <input id="search-input" placeholder="{:lang_i18n('请输入搜索关键字,如安装赛博云空间,影视库')}" autocomplete="off" />
                <img src="__IMAGES__/nas_help_detail_search.png" class="ssimg">
            </div>
            <!-- 下拉搜索框 -->
            <div class="dropdown" id="dropdown"></div>
        </div>
        <!-- 目录-文章详情-锚点定位- -->
        <div class="nars-help-content">
            <!-- 目录 -->
            <div class="nars-hlpdt-ml">
                {notempty name="article_categorys"}
                <div class="nav-tree">

                    <!-- start 三级菜单的测试代码   -->
                    {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}" /></div>
                            <span>{$ac.name}</span>
                        </div>
                        <!-- 二级-->
                        <ul class="sub-list"  {if condition='$ac.id == $Request.get.cid' }style="display: block;" {/if}>
                            {volist name="ac.child" id="ad"}
                            <li class="two-mues">
                                <a href="#" class="two-a">
                                    <div class="arrow {if condition='$ad.id == $Request.get.cid'}rotate{/if}"><img src="__IMAGES__/nas-jt.png" class="arrow" /></div>
                                    <span>{$ad.name}</span>
                                </a>
                                <ul class="thress-mues">
                                    {volist name="ad.article" id="ae"}
                                    <li><a href="{:url('/index/topic/nas/help_detail', ['cid' => $ad.id, 'id' => $ae.id])}" style="padding-top: 6px;padding-left: 30px;" {eq
                                           name="ae.id" value="$Request.get.id" }class="active" {/eq}>{$ae.title}</a></li>
                                    {/volist}
                                </ul>
                                <!-- 三级-->
                            </li>
                            {/volist}
                            {volist name="ac.article" id="ar"}
                            <li><a href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id, 'id' => $ar.id])}" style="padding-top: 6px;" {eq
                                   name="ar.id" value="$Request.get.id" }class="active" {/eq}>{$ar.title}</a></li>
                            {/volist}

                        </ul>
                    </div>
                    {/volist}
                    <!-- end 三级菜单的测试代码   -->

                </div>
                {/notempty}
            </div>
            <!--文章详情 -->
            <div class="ql-container ">
                <div class="nars-hlpdt-mm ql-editor" id="rendered-content">{$article.content|raw|default=''}</div>
            </div>
            <!--锚点定位 -->
            <div class="nars-hlpdt-mr">
                <div id="title-list">
                    <h2 class="tt">{:lang_i18n('目录')}</h2>
                    <ul></ul>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{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);
            if (!target.closest('.nhlp-search').length) {
                $('#dropdown').hide();
            }
        });
        var timeout = null;
        $('.nars-hlp-search input').on('focus input', function () {
            clearTimeout(timeout);
            var _this = this;
            timeout = setTimeout(function () {
                var keywords = $(_this).val();
                if (keywords == '') {
                    $('#dropdown').hide().html('');
                    return;
                }
                $.ajax({
                    url: "{:url('/index/topic/nas/help_search')}",
                    type: 'POST',
                    data: {
                        keywords: keywords
                    },
                    dataType: 'JSON',
                    success: function (r) {
                        var html = '';
                        if (r.code == 0) {
                            html = '<ul>'
                            $.each(r.data, function (k, v) {
                                html +=
                                    '<li><a href="{:url(\'/index/topic/nas/help_detail\')}?cid=' + v.category_id + '&id=' + v.id + '">' + v.title + '</a></li>'
                            })
                            html += '</ul>'
                        }
                        $('#dropdown').show().html(html);
                    }
                })
            }, 300);
        })
        // 内容
        // 清空标题列表
        $("#title-list ul").empty();
        // 提取 h3 标题
        var h1Titles = $("#rendered-content").find("h3");
        // 只有当找到h3标题且内容不为空时才进行处理
        if (h1Titles.length > 0) {
            h1Titles.each(function (index) {
                var title = $(this);
                var titleText = title.text().trim(); // 使用trim()去除空白字符
                // 只有当标题文本不为空时才添加到列表
                if (titleText) {
                    var titleId = "title-" + index;
                    title.attr("id", titleId);
                    var listItem = $("<li>");
                    var link = $("<a>", {
                        href: "#" + titleId,
                        text: titleText
                    });
                    listItem.append(link);
                    $("#title-list ul").append(listItem);
                }
            });
        }
    });
</script>
{/block}