嵌套的单击事件处理程序导致单击一次多次运行处理程序的问题

Question

我正在构建一个多级菜单，其中包含附加到菜单项的点击事件，菜单项下面有子项。

下面我的演示JSFiddle显示了我的问题。当父菜单项具有子项时，它还具有子项，它们触发我的点击事件处理程序2次。每个级别的深度将触发事件+1次。

如何使该演示仅处理1次点击事件，无论菜单项位于哪个级别？

现在，click事件附加到CSS类.tag-menu-arrow，因此当子项具有自己的子项时，它会生成多个级别，.tag-menu-arrow类彼此嵌套，从而导致单击处理程序多次射击。

演示 https://jsfiddle.net/jasondavis/m6bxujoe/

HTML菜单

<ul id="tag-menu">
    <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="JavaScript">JavaScript</a>
        <ul>
            <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="ElementJS">ElementJS</a>
                <ul>
                    <li><a href="#"><span class="sub-folder"></span> Marketing</a>
                    </li>
                </ul>
            </li>
            <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="jQuery">jQuery</a>
                <ul>
                    <li><a href="#"><span class="sub-folder"></span> WebDev</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><span class="sub-folder"></span> NodeJS</a>
            </li>
            <li><a href="#"><span class="sub-folder"></span> Templates</a>
            </li>
        </ul>
    </li>
    <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="PHP">PHP</a>
        <ul class="open">
            <li class="parent-tag-menu"><span class="tag-menu-arrow"></span> <a href="#" data-parent-name="ElementJS">ElementJS</a>
                <ul class="">
                    <li><a href="#"><span class="sub-folder"></span> Marketing</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><span class="sub-folder"></span> Marketing</a>
            </li>
        </ul>
    </li>
</ul>

的JavaScript

$( document ).ready(function() {
  $( '.parent-tag-menu' ).on('click', '.tag-menu-arrow', function() {
    $(this).next().next().toggleClass( 'open' );
  });
});