Javascript 使用jQuery航路点切换appendTo（）

My.topics元素在DOM中重新定位自己——出于测试目的，在触发航路点时获取“active”类

$('.navbar').waypoint(function() {
    $('.topics').toggleClass('active');
    $('.topics').appendTo( $('#menu') );
}, { offset: -50 });

当航路点不再在视图中时，“活动”类将按预期从.topics中删除，但.topics元素仍附加到#菜单中

---

是否可以通过切换appendTo（）将.topics还原到其原始DOM位置；或者在航路点变为非活动状态时触发事件？

输入if语句检查元素是否存在如何

$('.navbar').waypoint(function() {
    $('.topics').toggleClass('active');
    if ($('#menu .topics').length) {
        $('#menu .topics').remove();
    } else {
        $('.topics').appendTo( $('#menu') );
    }
}, { offset: -50 });

---

这里没有试图窃取@Banana的rep，但您会发现，避免在每次处理程序启动时多次重新发现

.topics

元素更有效。例如：

• 分配$（'.topics'）的结果，以便可以重用
• 测试

  .hasClass（'active'）

  而不是

  $（'#menu.topics'）。长度

如果我的理解是正确的，那么这将产生与您改编香蕉代码相同的效果：

$('.navbar').waypoint(function() {
    var $topics = $('.topics').toggleClass('active');
    if($topics.hasClass('active')) {
        $topics.appendTo( $('#menu') );
    } else {
        $topics.appendTo( $('#orginialmenu') );
    }
}, { offset: -50 });

---

这样的性能优化对于站点/应用程序的UI/UX质量非常重要，尤其是在DOM广泛的情况下。

“航路点”？一个jQuery插件。请提供一个链接啪，我的坏。。。我应该指定它是一个插件。一个可靠的方法，但是。当航路点处于非活动状态时，主题仍然附加到#菜单。当航路点被禁用时，是否重新检查if/else语句？长度是否表示存在“#menu.topics”？@rick是的，它检查是否存在。如果它不起作用，我不确定你想要什么是可以通过这种方式实现的。但是，您始终可以通过添加

.topics

来切换

.toggle{display:none；}.toggle.active{display:block；}

.I交换$（'#menu.topics'）.remove（）；带有$（'.topics'）.appendTo（$（'#orginialmenu'）；这就是工作。谢谢你哟，这太好了！感谢您继续使用更优化的方法。非常感谢！