реагировать bootstrap, чтобы переключить / скрыть панель навигации с jquery - PullRequest
Новая
       65

реагировать bootstrap, чтобы переключить / скрыть панель навигации с jquery

0 голосов
/ 14 апреля 2020

У меня есть реагирует- bootstrap navbar . И я хочу добавить дополнительное действие переключения / скрытия на панель навигации. (рядом с кнопкой переключения по умолчанию). Мой первый подход был следующий код. 

 if ($("#navbar-nav").hasClass("show"))
        $("#navbar-nav").collapse("hide")

Но это работает только наполовину. Так как я могу запустить это. Это действительно скроет крах. Но когда я переключаю его после оригинальной кнопки переключения, он не запускается с первого раза. Только после повторного нажатия он покажет это снова. Я предполагаю, что код bootstrap js конфликтует с кодом реагировать bootstrap. (не устанавливая новое состояние?)

Итак, мой вопрос будет таким: Как я могу переключить или скрыть развал-1030 * navbar с помощью jQuery или React?

--- ОБНОВЛЕНИЕ ----

Я добавил больше кода для улучшения картинки.

Это часть функционального компонента Navbar 

  return (
    <Navbar
      expand="lg"
      sticky="top"
      className={"align-self-center"}
    >
      <Row className={"m-0"} style={{ width: "100%" }}>
        <Col xs={6} lg={0} className={"d-lg-none align-self-center"}>
          <Navbar.Toggle  // <---------------------------- TOGGLE
            id={"navbar"}
            aria-controls="basic-navbar-nav"
            className={"float-right align-self-center"}
          >
            {<GiHamburgerMenu />}
          </Navbar.Toggle>
        </Col>

        <Col xs={12} lg={9} className={"align-self-center"}>
          <Navbar.Collapse // <---------------------------- COLLAPSE
            id="navbar-nav"
            className={"justify-content-end "}
          >
            <MenuHeader data={data} />
          </Navbar.Collapse>
        </Col>
      </Row>
    </Navbar>
  )

В меню есть пункт с классом .contact-button Если щелкнуть по нему, запустится следующий код. 

  useEffect(() => {
    $(".contact-button").click(function() { 
      if ($("#navbar-nav").hasClass("show")) // <----------- if is currently showing  
        $("#navbar-nav").collapse("hide") // <----------- toggle 

      var $target = $("html,body")
      $target.animate({ scrollTop: $target.height() }, 500)
    })
  }, [])

Это два использования кнопки контакта. Упрощенный рендеринг html вывода кнопки. Элемент li является потомком <MenuHeader/>

<div class="btn contact-button">contact</div>
<li class="nav-item contact-button">contact</li>
...