javascript - 在 Reactjs 中集成购买的引导模板,但是 js 效果不起作用
问题描述
我已经将我的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>
解决方案
推荐阅读
- django - 当 Knox 创建的令牌过期时如何强制注销?
- javafx - 在netbeans ide中的java fx中加载文件的问题
- sql - 如果与前一行相同,如何将后续行值设置为空
- jmeter - 即使在更改 .bzt-rc 文件后,Taurus 也不会采用 Jmeter 设置本地路径
- scala - Scala 的 Set() 和 Set.empty 有什么区别?
- python - 具有相同大小的散景网格图的问题
- nginx - 无法使用代理调用 watson 语言翻译器
- php - 不需要日期字段,但没有它就不会提交表单
- javascript - 延迟加载带有图片、源代码和 img 标签的图像(webp、jpg)(React)
- sql - T-SQL:舍入时间为 15 分钟,但仅在 15 分钟后的 5 分钟后