Question

我正在将一个megamenu从HTML / CSS / JavaScript转换为在WordPress中工作。我已经创建了一个工作步行器，所有设置。问题是，我无法让JavaScript工作。 JavaScript应该会触发顶级li以在点击时打开一个大型菜单部分，并在再次点击时关闭它。

我使用过这个JavaScript文件：

var swMegaMenu = (function() {

    var $listItems = $( '#sw-hrmenu > ul > li' ),
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;

    function init() {
        $menuItems.on( 'click', open );
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }

    function open( event ) {

        if( current !== -1 ) {
            $listItems.eq( current ).removeClass( 'sw-hropen' );
        }

        var $item = $( event.currentTarget ).parent( 'li' ),
            idx = $item.index();

        if( current === idx ) {
            $item.removeClass( 'sw-hropen' );
            current = -1;
        }
        else {
            $item.addClass( 'sw-hropen' );
            current = idx;
            $body.off( 'click' ).on( 'click', close );
        }

        return false;

    }

    function close( event ) {
        $listItems.eq( current ).removeClass( 'sw-hropen' );
        current = -1;
    }

    return { init : init };

})();

我已将其插入footer.php：

<script>
            $(function() {
                swMegaMenu.init();
            });
        </script>

问题是我在footer.php中遇到了这个错误：

<script>
            $(function() { // Uncaught TypeError: Undefined is not a function
                swMegaMenu.init();
            });

</script>

和JavaScript文件中的此错误：

var swMegaMenu = (function() {

    var $listItems = $( '#sw-hrmenu > ul > li' ), // Uncaught TypeError: Undefined is not a function
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;

Answer 1

尝试以下代码

<script>
			(function($) { // Uncaught TypeError: Undefined is not a function
				swMegaMenu.init();
			})(jQuery);

</script>

var swMegaMenu = (function($) {

	var $listItems = $( '#sw-hrmenu > ul > li' ), // Uncaught TypeError: Undefined is not a function
		$menuItems = $listItems.children( 'a' ),
		$body = $( 'body' ),
		current = -1;

Answer 2

您正在使用WordPress的默认jQuery实例，但您没有使用noConflict() wrappers。

在noConflict()模式下，jQuery的全局$快捷方式不可用。这就是您看到undefined错误的原因。

要解决此问题，您需要将$的所有实例替换为jQuery，或者使用包装器包装整个函数集。例如：

(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
})(jQuery);

了解更多in the Codex。

如何修复＆＃34; undefined不是一个功能＆＃34;在WordPress中

2 个答案: