javascript - gatsbyjs中的bulma菜单切换不起作用
问题描述
GatsbyJS 初学者在这里,试图让 Bulma 响应式菜单切换以将“is-active”类应用于菜单(带有 gatsby starter netlify cms 的 gatsby v2)。这里的所有代码:https ://github.com/pddew/gatsby-starter-netlify-cms
目前出现切换按钮和脚本标签,但按钮没有响应。
在gatsby starter business中有一个工作版本- 当我检查我的网站并将其与此进行比较时,我无法发现错误,只是在切换按钮上没有事件监听器,而它似乎应该有。当我检查该站点时,正在调用 toggle.js 脚本并将其放在结束 body 标记之前,然后进行查看。
我尝试过构建和部署,但没有成功,清除缓存并将脚本换成 bulma 建议的代码。
这是相关的代码。非常感谢您对此的任何帮助;我有点卡住了!
在 Layout.js 中:
import React from 'react' import Helmet from 'react-helmet'
import Navbar from '../components/Navbar' import Footer from '../components/Footer' import './all.sass'
const TemplateWrapper = ({ children }) => ( <div>
<Helmet title="Immediate Start Jobs" />
<Navbar />
<div>{children}</div>
<Footer /> </div> )
export default TemplateWrapper
在导航栏中:
<button className="button navbar-burger" data-target="navMenu">
<span />
<span />
<span />
</button>
</div>
<div className="navbar-menu" id="navMenu">
<div className="navbar-start">
<Link className="navbar-item" to="/about">
About
</Link>
<Link className="navbar-item" to="/products">
Products
</Link>
<Link className="navbar-item" to="/blog">
Blog
</Link>
</div>
在 html.js 中
import React from "react"
import PropTypes from "prop-types"
export default class HTML extends React.Component {
render() {
return (
<html {...this.props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{this.props.headComponents}
</head>
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
<script src={__PATH_PREFIX__ + '/js/toggle.js'} />
</body>
</html>
)
}
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
还有我的 toggle.js,存储在 static/js/
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the className on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
解决方案
我自己是 Gatsby 的新手,但我必须想办法让我的导航栏正常工作。我的解决方案非常快速和肮脏,但它有效。如果您构建的网站包含大量更改状态的组件,我建议您改用 redux 和中央存储。我的解决方案只是拥有一个处理自己状态的导航栏。
import React, { Component } from 'react'
import Link from 'gatsby-link'
class Navbar extends Component {
state = {
//This sets the state of Bulma elements
navbarIsActive: "navbar-item has-dropdown"
}
//This opens the navbar dropdown
navbarOpenDropdown = () => {
this.setState({
navbarIsActive: "navbar-item has-dropdown is-active"
})
}
//This closes the navbar dropdown
navbarCloseDropdown = () => {
this.setState({
navbarIsActive: "navbar-item has-dropdown"
})
}
render() {
return(
<div>
<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
<h1>Title!</h1>
</a>
<div
class={this.state.navbarIsActive}
onMouseEnter={this.navbarOpenDropdown}
onMouseLeave={this.navbarCloseDropdown}
>
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown is-boxed">
<Link to="/">Home</Link>
<Link to="/about">About Us</Link>
<Link to="/blog">Blog</Link>
<hr class="navbar-divider"/>
<div class="navbar-item">
Version 0.7.2
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-body">
<p class="title">
Documentation
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
</section>
</div>
)
}
}
export default Navbar;
推荐阅读
- reactjs - Passing bool to a child component doesn't work correctly
- .net-core - How to setup .Net Core NUnit testing with Azure Pipelines
- java - Compilation error when instantiating object
- python - 如何仅计算组中第一个值的差异?
- c# - 如何使用uribuilder获取目录下的所有子目录
- python - 为什么我的旋转图像没有正确保存?
- java - 在自定义 Java AWS 应用程序中找不到类的序列化程序
- flutter - Dart - 强制一个类有一个工厂
- vb.net - 使用 ADODB 从查询中检索值
- python - Python 串行通信脚本问题(在 Visual Studio 中)