我已经将我的 react-js 与购买的模板集成在一起，并且设计完美，但是将从 custom.js 启动的效果不起作用。就像点击时切换下拉菜单一样，将当前 nav-item 设置为活动状态。
我刚刚将 custom.js 文件导入到 index.html
我是 react-js 的新手，所以需要我们社区的帮助。
$("a.close").removeAttr("href").on('click',function(){
function slideFade(elem) {
var fadeOut = { opacity: 0,transition: 'opacity 0.5s' };
elem.css(fadeOut).slideup();
}
slideFade($(this).parent());
});
/*--------------------------------------------------*/
/* Notification Dropdowns
/*--------------------------------------------------*/
$(".header-notifications").each(function() {
var userMenu = $(this);
var userMenuTrigger = $(this).find('.header-notifications-trigger a');
$(userMenuTrigger).on('click',function(event) {
event.preventDefault();
if ( $(this).closest(".header-notifications").is(".active") ) {
close_user_dropdown();
} else {
close_user_dropdown();
userMenu.addClass('active');
}
});
});
// Closing function
function close_user_dropdown() {
$('.header-notifications').removeclass("active");
}
// Closes notification dropdown on click outside the conatainer
var mouse_is_inside = false;
$( ".header-notifications" ).on( "mouseenter",function() {
mouse_is_inside=true;
});
$( ".header-notifications" ).on( "mouseleave",function() {
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) close_user_dropdown();
});
// Close with ESC
$(document).keyup(function(e) {
if (e.keyCode == 27) {
close_user_dropdown();
}
});<!-- This is from My header.js from react render method -->
<header id="header-container" classname="fullwidth">
<div id="header">
<div classname="container">
<div classname="left-side">
<div id="logo">
<img src={InspizyLogos} alt=""/>
<a href="index.html">
</a>
</div>
{/* <!-- Main Navigation --> */}
<nav id="navigation">
<ul id="responsive">
<li><a href="hzd" classname="current">Home</a>
<ul classname="dropdown-nav">
<li><a href="#">Home 1</a></li>
<li><a href="index-2.html">Home 2</a></li>
<li><a href="index-3.html">Home 3</a></li>
</ul>
</li>
<li><a href="#">Find Work</a>
<ul classname="dropdown-nav">
<li><a href="#">Browse Jobs</a>
<ul classname="dropdown-nav">
<li><a href="jobs-list-layout-full-page-map.html">Full Page List + Map</a></li>
<li><a href="jobs-grid-layout-full-page-map.html">Full Page Grid + Map</a></li>
<li><a href="jobs-grid-layout-full-page.html">Full Page Grid</a></li>
<li><a href="jobs-list-layout-1.html">List Layout 1</a></li>
<li><a href="jobs-list-layout-2.html">List Layout 2</a></li>
<li><a href="jobs-grid-layout.html">Grid Layout</a></li>
</ul>
</li>
<li><a href="#">Browse Tasks</a>
<ul classname="dropdown-nav">
<li><a href="tasks-list-layout-1.html">List Layout 1</a></li>
<li><a href="tasks-list-layout-2.html">List Layout 2</a></li>
<li><a href="tasks-grid-layout.html">Grid Layout</a></li>
<li><a href="tasks-grid-layout-full-page.html">Full Page Grid</a></li>
</ul>
</li>
<li><a href="browse-companies.html">Browse Companies</a></li>
<li><a href="single-job-page.html">Job Page</a></li>
<li><a href="single-task-page.html">Task Page</a></li>
<li><a href="single-company-profile.html">Company Profile</a></li>
</ul>
</li>
<li><a href="#">For Employers</a>
<ul classname="dropdown-nav">
<li><a href="#">Find a Freelancer</a>
<ul classname="dropdown-nav">
<li><a href="freelancers-grid-layout-full-page.html">Full Page Grid</a></li>
<li><a href="freelancers-grid-layout.html">Grid Layout</a></li>
<li><a href="freelancers-list-layout-1.html">List Layout 1</a></li>
<li><a href="freelancers-list-layout-2.html">List Layout 2</a></li>
</ul>
</li>
<li><a href="single-freelancer-profile.html">Freelancer Profile</a></li>
<li><a href="dashboard-post-a-job.html">Post a Job</a></li>
<li><a href="dashboard-post-a-task.html">Post a Task</a></li>
</ul>
</li>
<li><a href="#">Dashboard</a>
<ul classname="dropdown-nav">
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="dashboard-messages.html">Messages</a></li>
<li><a href="dashboard-bookmarks.html">Bookmarks</a></li>
<li><a href="dashboard-reviews.html">Reviews</a></li>
<li><a href="dashboard-manage-jobs.html">Jobs</a>
<ul classname="dropdown-nav">
<li><a href="dashboard-manage-jobs.html">Manage Jobs</a></li>
<li><a href="dashboard-manage-candidates.html">Manage Candidates</a></li>
<li><a href="dashboard-post-a-job.html">Post a Job</a></li>
</ul>
</li>
<li><a href="dashboard-manage-tasks.html">Tasks</a>
<ul classname="dropdown-nav">
<li><a href="dashboard-manage-tasks.html">Manage Tasks</a></li>
<li><a href="dashboard-manage-bidders.html">Manage Bidders</a></li>
<li><a href="dashboard-my-active-bids.html">My active Bids</a></li>
<li><a href="dashboard-post-a-task.html">Post a Task</a></li>
</ul>
</li>
<li><a href="dashboard-settings.html">Settings</a></li>
</ul>
</li>
<li><a href="#">Pages</a>
<ul classname="dropdown-nav">
<li><a href="pages-blog.html">Blog</a></li>
<li><a href="pages-pricing-plans.html">Pricing Plans</a></li>
<li><a href="pages-checkout-page.html">Checkout Page</a></li>
<li><a href="pages-invoice-template.html">Invoice Template</a></li>
<li><a href="pages-user-interface-elements.html">User Interface Elements</a></li>
<li><a href="pages-icons-cheatsheet.html">Icons Cheatsheet</a></li>
<li><a href="pages-login.html">Login & Register</a></li>
<li><a href="pages-404.html">404 Page</a></li>
<li><a href="pages-contact.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>
<div classname="clearfix"></div>
{/* <!-- Main Navigation / End --> */}
</div>
{/* <!-- Left Side Content / End --> */}
{/* <!-- Right Side Content / End --> */}
<div classname="right-side">
{/* <!-- User Notifications --> */}
<div classname="header-widget hide-on-mobile">
{/* <!-- Notifications --> */}
<div classname="header-notifications active">
{/* <!-- Trigger --> */}
<div classname="header-notifications-trigger">
<a href="#"><i classname="icon-feather-bell"></i><span>4</span></a>
</div>
{/* <!-- Dropdown --> */}
<div classname="header-notifications-dropdown">
<div classname="header-notifications-headline">
<h4>Notifications</h4>
<button classname="mark-as-read ripple-effect-dark" title="Mark all as read" data-tippy-placement="left">
<i classname="icon-feather-check-square"></i>
</button>
</div>
<div classname="header-notifications-content">
<div classname="header-notifications-scroll" data-simplebar>
<ul>
{/* <!-- Notification --> */}
<li classname="notifications-not-read">
<a href="dashboard-manage-candidates.html">
<span classname="notification-icon"><i classname="icon-material-outline-group"></i></span>
<span classname="notification-text">
<strong>Michael Shannah</strong> applied for a job <span classname="color">Full Stack Software Engineer</span>
</span>
</a>
</li>
{/* <!-- Notification --> */}
<li>
<a href="dashboard-manage-bidders.html">
<span classname="notification-icon"><i classname=" icon-material-outline-gavel"></i></span>
<span classname="notification-text">
<strong>Gilbert Allanis</strong> placed a bid on your <span classname="color">iOS App Development</span> project
</span>
</a>
</li>
{/* <!-- Notification --> */}
<li>
<a href="dashboard-manage-jobs.html">
<span classname="notification-icon"><i classname="icon-material-outline-autorenew"></i></span>
<span classname="notification-text">
Your job listing <span classname="color">Full Stack PHP Developer</span> is expiring.
</span>
</a>
</li>
{/* <!-- Notification --> */}
<li>
<a href="dashboard-manage-candidates.html">
<span classname="notification-icon"><i classname="icon-material-outline-group"></i></span>
<span classname="notification-text">
<strong>Sindy Forrest</strong> applied for a job <span classname="color">Full Stack Software Engineer</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
{/* <!-- Messages --> */}
<div classname="header-notifications">
<div classname="header-notifications-trigger">
<a href="#"><i classname="icon-feather-mail"></i><span>3</span></a>
</div>
{/* <!-- Dropdown --> */}
<div classname="header-notifications-dropdown">
<div classname="header-notifications-headline">
<h4>Messages</h4>
<button classname="mark-as-read ripple-effect-dark" title="Mark all as read" data-tippy-placement="left">
<i classname="icon-feather-check-square"></i>
</button>
</div>
<div classname="header-notifications-content">
<div classname="header-notifications-scroll" data-simplebar>
<ul>
{/* <!-- Notification --> */}
<li classname="notifications-not-read">
<a href="dashboard-messages.html">
<span classname="notification-avatar status-online"><img src="images/user-avatar-small-03.jpg" alt=""/></span>
<div classname="notification-text">
<strong>David Peterson</strong>
<p classname="notification-msg-text">Thanks for reaching out. I'm quite busy right now on many...</p>
<span classname="color">4 hours ago</span>
</div>
</a>
</li>
{/* <!-- Notification --> */}
<li classname="notifications-not-read">
<a href="dashboard-messages.html">
<span classname="notification-avatar status-offline"><img src="images/user-avatar-small-02.jpg" alt=""/></span>
<div classname="notification-text">
<strong>Sindy Forest</strong>
<p classname="notification-msg-text">Hi Tom! Hate to break it to you,but I'm actually on vacation until...</p>
<span classname="color">Yesterday</span>
</div>
</a>
</li>
{/* <!-- Notification --> */}
<li classname="notifications-not-read">
<a href="dashboard-messages.html">
<span classname="notification-avatar status-online"><img src="images/user-avatar-placeholder.png" alt=""/></span>
<div classname="notification-text">
<strong>Marcin Kowalski</strong>
<p classname="notification-msg-text">I received payment. Thanks for cooperation!</p>
<span classname="color">Yesterday</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<a href="dashboard-messages.html" classname="header-notifications-button ripple-effect button-sliding-icon">View All Messages<i classname="icon-material-outline-arrow-right-alt"></i></a>
</div>
</div>
</div>
{/* <!-- User Notifications / End --> */}
{/* <!-- User Menu --> */}
<div classname="header-widget">
{/* <!-- Messages --> */}
<div classname="header-notifications user-menu">
<div classname="header-notifications-trigger">
<a href="#">
<div classname="user-avatar status-online"><img src="images/user-avatar-small-01.jpg" alt="" />
</div>
</a>
</div>
<div classname="header-notifications-dropdown">
<div classname="user-status">
<div classname="user-details">
<div classname="user-avatar status-online"><img src="images/user-avatar-small-01.jpg" alt=""/></div>
<div classname="user-name">
Tom Smith <span>Freelancer</span>
</div>
</div>
<div classname="status-switch" id="snackbar-user-status">
<label classname="user-online current-status">Online</label>
<label classname="user-invisible">Invisible</label>
<span classname="status-indicator" aria-hidden="true"></span>
</div>
</div>
<ul classname="user-menu-small-nav">
<li><a href="dashboard.html"><i classname="icon-material-outline-dashboard"></i> Dashboard</a></li>
<li><a href="dashboard-settings.html"><i classname="icon-material-outline-settings"></i> Settings</a></li>
<li><a href="index-logged-out.html"><i classname="icon-material-outline-power-settings-new"></i> Logout</a></li>
</ul>
</div>
</div>
<span classname="mmenu-trigger">
<button classname="hamburger hamburger--collapse" type="button">
<span classname="hamburger-box">
<span classname="hamburger-inner"></span>
</span>
</button>
</span>
</div>
{/* <!-- Right Side Content / End --> */}
</div>
</div>
</div>
</header>
<div classname="clearfix"></div>