Question

我有一个带有此（简化）html的移动菜单

<ul id="mobile_menu">
    <li class="menu-item menu-item-has-children">
        <a href="#">Menu with Submenu</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">Submenu item 1</a></li>
            <li class="menu-item"><a href="#">Submenu item 2</a></li>
            <li class="menu-item enu-item-has-children"><a href="#">Submenu item 3</a>
                <ul class="sub-menu">
                    <li class="menu-item"><a href="#">Sub-Submenu item 1</a></li>
                    <li class="menu-item"><a href="#">Sub-Submenu item 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="menu-item"><a href="#">menu item 2</a></li>
    <li class="menu-item"><a href="#">menu item 3</a></li>
</ul>

我创建了一个辅助元素来关闭移动设备中的子菜单。我在一个函数中创建它，如下所示：

var mainli_a =  jQuery('#mobile_menu .menu-item-has-children > a');

mainli_a.on('touchstart click', function(e){

                    "use strict";
                    var link = jQuery(this);
                    if (link.parent().hasClass('active')) {
                        return true;
                    } else {
                        link.parent().addClass('active')
                        link.parent().append('<span class="closesubmenu"> </span>');  // here I create the element

                        e.preventDefault();
                        return false; 
                    }
                });

我所说的元素是span.closesubmenu

然后，点击它，我想删除一个类到它的父元素，然后删除元素.closesubmenu本身。

这是我尝试的方式：

   jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){

            jQuery(this).parent().removeClass('active', 0, 'linear', function(){
                 jQuery(this).remove(); // this does not work
            });

    });

在回调关闭子菜单时尝试操作并不重要。它不起作用。

它只能像这样工作：

 jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){

         jQuery(this).remove(); // this works    

    });

此外，如果我只对2行进行2次操作，则只有第一行有效：

 jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){

         jQuery(this).remove(); // this works  
         jQuery(this).parent().removeClass('active'); // this does not work 

    });

 jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){

         jQuery(this).parent().removeClass('active'); // this works  
         jQuery(this).remove(); // this does not work 

    });

我在这里缺少什么？

更新：

我也按照答案中的建议尝试将元素存储在var中以在回调中使用，如下所示：

            jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){
                var self = this;
                jQuery(self).parent().removeClass('active', 0, 'linear', function(){
                    jQuery(self).remove();
                });
        });

但它没有用。

更新2 ：jsFiddle

https://jsfiddle.net/bluantinoo/yr4gdjdz/3/

更新3 ：感谢大卫（选择回答）这是正确而有效的小提琴：https://jsfiddle.net/bluantinoo/yr4gdjdz/6/

Answer 1

您传递给.removeClass()的所有这些参数是什么？

jQuery(this).parent().removeClass('active', 0, 'linear', function(){
    jQuery(this).remove();
});

It's only expecting the class name(s).并且它不是带回调的异步操作。只需删除类，然后删除元素：

jQuery(this).parent().removeClass('active');
jQuery(this).remove();

Example.

jQuery，在回调单击它时操纵动态创建的元素

1 个答案: