单击第一个 div 中的集合名称时，如何在第二个 div 中显示集合页面列表？ 杰基尔

如何解决单击第一个 div 中的集合名称时，如何在第二个 div 中显示集合页面列表？ 杰基尔

我是 jekyll 的新手并且有 js 初学者经验。 [Jekyll 版本：4.2.0]

我有左导航窗格、中心内容和右导航窗格。
在左侧导航中，我想显示每个集合的标题，当用户点击它时，右侧导航应该显示该集合的每个页面的标题。

我可以使用以下代码在左侧导航中显示每个集合的名称：

<div class="left_sidebar">
        {% for coll in site.collections %}
        {% if coll.label != "posts" %}
        <a href="{{ coll.docs[0] | relative_url }}" class="col_link" >{{ coll.title }}</a>
        {% endif %}
        {% endfor %}
</div>
<div class="main">{{ content }} </div>
<div class="right_sidebar"></div>

但我找不到填充正确导航的方法。页面应如下所示： site_mockup

我尝试了一些脚本，但到目前为止没有运气：

<script>
    $(function() { 
        $( '.col_link' ).on( 'click',function() { 
            $('.right_sidebar').load('{% include data.html %} #items');
        });
    });
</script>

_includes/data.html:

{% assign curr_coll = page.collection %}
{% for page in curr_coll.docs %}
    <a href="{{ page | relative_url }}" id="items">{{ page.title }}</a>
{% endfor %}