jQuery.trigger =＆gt;选择器：在克隆元素=循环上切换

Question

在克隆菜单上（.original / .cloned）我有问题让2个切换功能中的一个正常工作。

第1部分克隆菜单切换

$('.mobile-nav-toggle').click(function(e) {
    e.preventDefault();

    var $this = $('a');

    if ($this.hasClass('open')) {
        $this.trigger('mobilenav:close', [$this, 'close']);
    } else {
        $this.trigger('mobilenav:close', [$this, 'open']);
    }
    // Guess this one get executed twice
    $this.trigger('mobilenav:toggle', [$this]);
});

第2部分克隆菜单切换

$(document).on('mobilenav:toggle', function(e, $obj) {
    $('.original>div>nav').toggleClass('open').slideToggle(300);
    $('.cloned>div>nav').toggleClass('open').slideToggle(300);
    $obj.toggleClass('close');
});

我理解问题是我使用$（＆＃39; a＆＃39;）作为我的选择器使 mobilenav：toggle 触发两次然后它会循环打开和关闭两个菜单。

另一方面，mobile-nav-toggle图标不能正确循环和同步，菜单抽屉同步但循环播放。

如果我改变

$this = $('a');
// To
$this = $(this);

除了不会同步的切换图标外，一切都会有效。

已经给了这几个小时了，我的 Javascript / jQuery 的宏观水平只是弱，因为可能在我的半屁股解决方案上可以看到 Part＃2 。

观看我的杰作！

帮助我做个专业人士！

编辑：在请求后添加粘滞/克隆功能的其余代码

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '100').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);

function stickMenu() {

    var orgElementPos = $('.original').offset();
    orgElementTop = orgElementPos.top;

    if ($(window).scrollTop() >= (orgElementTop)) {    
        orgElement = $('.original');
        coordsOrgElement = orgElement.offset();
        leftOrgElement = coordsOrgElement.left;
        widthOrgElement = orgElement.css('width');
        $('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show();
        $('.original').css('visibility', 'hidden');
        $('.original>div>nav').removeAttr("id", "off-nav");
    } else {
        $('.cloned').hide();
        $('.original>div>nav').attr("id", "off-nav");
        $('.original').css('visibility', 'visible');
    }
}

修改：添加了标记

<header class="menu" id="main-header-wrap"">
    <div class="" id="main-header">
        <div class="toptop"></div>
        <div class="container">
            <div class="row">
                <div id="logotype">         
                </div>
                <div id="menu-container" class="clearfix">
                    <a class="mobile-nav-toggle lines-button x skiplink">
                        <span class="lines"></span>
                    </a>
                    <nav>
                    </nav>
                </div>
            </div>
        </div>
        <nav id="off-nav">
            <ul><li class=""></li></ul>
        </nav>
    </div>
</header>