WordPress中的jQuery显示警告"不能在模块外部使用导入语句"

Question

我是一个开发WordPress主题的新手，但在导航菜单中遇到了一些问题。由于某些原因，我想通过jQuery打开子菜单，但非常失败。你们能帮我解决这个问题吗？我在不同的php和js页面中编码了以下内容。

header.php

<div class="anilaDefaultHeader__bottom">
<nav class="main-menu" role="navigation" aria-label="<?php esc_html_e( 'Main Navigation', 'anila' ) ?>">              
<?php
get_template_part( 'template/header/main-menu' );
?>
</nav>
<div class="search-area">          
<?php get_search_form(); ?>
</div>
</div>

/src/js/navigation.js

import $ from 'jquery';    
$( '.anilaDefaultHeader__bottom' ).on( 'mouseenter', '.menu-item-has-children' (e) =>  {
$(.currentTarget).addClass('open');
}).on('mouseleave', '.menu-item-has-children', (e) => {
$(e.currentTarget).removeClass('open');
})

/lib/anil-script.php

function anila_custom_script() {
wp_enqueue_style( 'style-css',get_template_directory_uri() . '/src/css/main.css' );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
wp_enqueue_script( 'anila_script', get_template_directory_uri() . '/src/js/navigation.js', array( 'jquery' ), '1.0.0', true);
include( get_template_directory() . '/lib/inline-css.php' );
wp_add_inline_style( 'style-css', $inline_styles );
}
add_action( 'wp_enqueue_scripts', 'anila_custom_script' );

一切正常，但当我悬停时，唯一的子菜单没有打开。

如果我去检查并手动添加类"open"，它会正确显示。但它应该在我悬停时打开。我去检查和控制台，发现并错误

**

"不能在模块外使用导入语句">

**

当我删除时

import $ from 'jquery';

从navigation.js

然后这个消息出现在检查->控制台中

**

$不是函数navigation.js吗？ver=1.0.0:2

**

请帮忙修理。

Answer 1

尝试用jQuery替换$。这通常能解决我的问题。而且不要使用import。请查看此处了解更多信息。