首页 文章

在gatsbyjs中的bulma菜单切换不起作用

提问于
浏览
0

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 回答

  • 1

    我自己是盖茨比的新手,但我必须找到一种方法让我的导航栏起作用 . 我的解决方案非常快速和肮脏,但它的工作原理 . 如果您构建一个包含许多改变状态的组件的网站,我建议使用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;
    

相关问题