多个事件监听器 - 如何将它们重构为一个函数？

Question

我有一个带有类似子菜单的导航菜单：

<ul>
<li class="sub-menu">
    <a class="sub-menu-work" href="#" aria-expanded="false">Work</a>
    <ul class="sub-menu-work-items" data-visible="false">
        <li>
            <a href="/work/example-1">Example 1</a>
        </li>
        <li>
            <a href="/work/example-2">Example 2</a>
        </li>
    </ul>
</li>
<li class="sub-menu">
    <a class="sub-menu-blog" href="#" aria-expanded="false">Blog</a>
    <ul class="sub-menu-blog-items" data-visible="false">
        <li>
            <a href="/work/example-1">Blog Page 1</a>
        </li>
        <li>
            <a href="/work/example-2">Blog Page 2</a>
        </li>
    </ul>
</li>

现在我可以写一些JS将ARIA扩展的切换到'true/false'，并且数据可见至这样的“ true/false”：

const subMenuWork = document.querySelector('.sub-menu-work');
const subMenuWorkItems = document.querySelector('.sub-menu-work-items');
const subMenuBlog = document.querySelector('.sub-menu-blog');
const subMenuBlogItems = document.querySelector('.sub-menu-blog-items');

// Toggle work
subMenuWork.addEventListener('click', () => {
    subMenuWork.setAttribute('aria-expanded', subMenuWork.getAttribute('aria-expanded') == 'false' ? 'true' : 'false');
    subMenuWorkItems.setAttribute('data-visible', subMenuWorkItems.getAttribute('data-visible') == 'false' ? 'true' : 'false');
})

// Toggle blog
subMenuBlog.addEventListener('click', () => {
    subMenuBlog.setAttribute('aria-expanded', subMenuBlog.getAttribute('aria-expanded') == 'false' ? 'true' : 'false');
    subMenuBlogItems.setAttribute('data-visible', subMenuBlogItems.getAttribute('data-visible') == 'false' ? 'true' : 'false');
})

我的问题是如何创建一个事件侦听器，该侦听器在单击适当的链接时会切换值。

我确实深表歉意，因为我对JS相对较新，尽管我可以使它起作用，但我意识到重构和使其更模块化要好得多。我不知道要搜索什么，所以作为最后的手段来到这里。

提前致谢