React中的Js文件中的mouseenter事件无效问题

发布于 2021-11-27 05:07:51 字数 2939 浏览 908 评论 1

HTML:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>TEST</title>

		<!-- 基础样式文件 开始 -->
		<link href="css/base.css" rel="stylesheet" type="text/css">
		<link href="css/index.css" rel="stylesheet" type="text/css">
		<!-- 基础JS文件 开始 -->
		<script type="text/javascript" src="framework/react-15.3.1.min.js"></script>
		<script type="text/javascript" src="framework/react-dom-15.3.1.min.js"></script>
		<script type="text/javascript" src="framework/browser.min.js"></script>
		<script type="text/javascript" src="framework/jquery-1.11.3.min.js"></script>

		<script type="text/javascript" src="js/base.js"></script>
		<!--<script type="text/javascript" src="framework/lb.js"></script>-->
		<!--<script type="text/javascript" src="js/index.js"></script>-->
		<!--<script type="text/javascript" src="js/scroll.js"></script>-->

		<script type="text/babel" src="jsx/index/logo.jsx"></script>
		<script type="text/babel" src="jsx/index/banner.jsx"></script>
		<!--<script type="text/babel" src="jsx/index/main.jsx"></script>-->
		<script type="text/babel" src="jsx/index/copyright.jsx"></script>
		<!-- 基础样式文件结束 -->
	

	</head>

	<body>
		<!-- logo -->
		<div id="logo"></div>
		<!-- banner -->
		<div id="banner"></div>
		<!-- main -->
		<!--<div id="main"></div>-->
		<!-- copyright -->
		<div id="copyright"></div>
	</body>

</html>



我的banner中插入了React的组件,这个组件有一个Jquery的效果鼠标移入,菜单显示二级菜单。如图:

base.js代码为正确有效的代码,此项目是从一个已经完成的无问题的项目中迁移到React项目的:

//下拉菜单
	$(".banner .father li").mouseenter(function(){
		alert(11);
		var num = $(this).index();
		var nums = $(".banner .father .father_li").length;

		$(this).find(".children").show();
		$(this).css("background-color","#00479f").css("margin-left","-1px");
		$(this).find(".father_a").css("border-right","1px solid #00479f").css("font-weight","600");
	});
	$(".banner .father li").mouseleave(function(){
		var num = $(this).index();
		var nums = $(".banner .father .father_li").length;
		
		$(this).find(".children").hide();
		$(this).css("background-color","transparent").css("margin-left","0px");
		$(this).find(".father_a").css("border-right","1px solid #FFF").css("font-weight","100");
	});

让我困惑的是,迁移过来后,一切都没有问题,唯独这个Jqeury的二级菜单的特效出不来,我在mouseenter方法中加入alert,测试后,alert不运行。

请问高手这个问题怎么解决。

在线等待。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

挽清梦 2021-11-27 18:54:51

React标题开头,问题里你的React呢?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文