Rails 5 / jQuery: событие сенсорного запуска при нажатии не работает - PullRequest
Новая
       53

Rails 5 / jQuery: событие сенсорного запуска при нажатии не работает

0 голосов
/ 21 мая 2018

Я пытаюсь использовать компонент бурбон / заправка (slide_panel), и у меня есть событие on('click touchstart').Я использую это для моего меню навигации.Событие будет отлично работать при загрузке первой страницы, но после этого остановится.Событие использует toggleClass, чтобы показать и скрыть меню.Я не был уверен, была ли это проблема с турболинками, поэтому я немного покопался и нашел драгоценный камень jquery-turbolinks.Я прошел инструкции по установке, но тот же результат.У кого-нибудь еще возникла такая проблема?

Код ниже:

_navbar.html.erb 

<button type="button" class="js-menu-trigger sliding-panel-button">
 Click for Sliding Panel
</button>

<nav class="js-menu sliding-panel-content">
 <ul>
  <li><%= link_to 'Users', users_path %></li>
  <li><a href="javascript:void(0)">Item 2</a></li>
  <li><a href="javascript:void(0)">Item 3</a></li>
 </ul>
</nav>

<div class="js-menu-screen sliding-panel-fade-screen"></div>

slide_panel.js 

$(document).ready(function(){
 $('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
 $('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
 e.preventDefault();
 });
});

slide_panel.scss 

.sliding-panel-content {
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $sliding-panel-border-color: $dark-gray;
  $sliding-panel-background: lighten($sliding-panel-border-color, 5%);
  $sliding-panel-color: #fff;
  $sliding-panel-border: 1px solid $sliding-panel-border-color;
  $sliding-panel-background-hover: $action-color;
  $sliding-panel-color-hover: #fff;
  $sliding-panel-background-focus: lighten($sliding-panel-background, 5%);

  @include position(fixed, 0 auto 0 0);
  @include size(220px, 100%);
  background: $sliding-panel-background;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transform: translateX(-220px);
  transition: all 0.25s linear;
  z-index: 999999;

  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  li a {
    border-bottom: $sliding-panel-border;
    color: $sliding-panel-color;
    display: block;
    font-weight: bold;
    padding: 1em;
    text-decoration: none;

    &:focus {
      background-color: $sliding-panel-background-focus;
    }

    &:hover {
      background-color: $sliding-panel-background-hover;
      color: $sliding-panel-color-hover;
    }
  }

  &.is-visible {
    transform: translateX(0);
  }
}

.sliding-panel-fade-screen {
  @include position(fixed, 0);
  background: black;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 999998;

  &.is-visible {
    opacity: 0.4;
    visibility: visible;
  }
}

.sliding-panel-button {
  cursor: pointer;
  display: inline-block;
  outline: none;
  padding: 10px 16px;
  position: relative;

  img {
    height: 1.3em;
  }
}

Они точно скопированы именно с сайта бурбонов / заправок здесь .

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Хорошо, у меня были Turbolinks ~> 5.2.Я вернулся к Turbolinks ~> 5.0.1 и затем загрузил jQuery так: $(document).on('turbolinks:load', function() вместо использования ready(). Этот ТАК пост помог мне найти решение.

0 голосов
/ 21 мая 2018

Вы должны слушать не готовое событие, а page:load событие.Итак, код будет выглядеть примерно так: 

$(document).on('page:load', function(){
 $('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
 $('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
 e.preventDefault();
 });
});

Источник: Rails 4: как использовать $ (document) .ready () с турбо-ссылками

Надеюсь, это поможет.

...