GatsbyJS初学者在这里尝试使用Bulma响应式菜单切换以将"is-active"类应用于菜单(gatsby v2 with gatsby starter netlify cms) . 这里的所有代码:https://github.com/pddew/gatsby-starter-netlify-cms
目前出现切换按钮和脚本标签,但按钮不响应 .
在gatsby starter business中有一个工作版本 - 当我检查并比较我的网站时,我无法发现错误,只是在切换按钮上没有事件监听器,当它看起来应该有 . 当我检查网站时,正在调用toggle.js脚本并将其放入结束体标记和查看之前 .
我尝试过构建和部署,没有运气,清除缓存并交换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
在Navbar中:
<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')
})
})
}
})
1 回答
我自己是盖茨比的新手,但我必须找到一种方法让我的导航栏起作用 . 我的解决方案非常快速和肮脏,但它的工作原理 . 如果您构建一个包含许多改变状态的组件的网站,我建议使用redux和中央商店 . 我的解决方案是只有一个处理自己状态的导航栏 .