Кнопка отображения изменения размера окна jQuery

Я сделал простую функцию jQuery, в которой, когда размер окна изменяется до размера менее 1000, отображается кнопка с классом navbar-toggle, а неупорядоченный список с классом navbar-nav скрывается (это навигация).

Проблема в том, что когда кнопка отображается, а панель навигации скрывается, кнопка на самом деле не работает должным образом - чтобы предоставить раскрывающийся список. Просто нужна помощь, чтобы эта кнопка действительно работала, как должна.

jQuery-функция:

$(window).resize(function() {
    if ($(window).width() < 1000) {
        $(".navbar-toggle").show();
        $(".navbar-nav").hide();
    } else {
        // do nothing
    }
});

HTML/ERB:

<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">   
        <a class="navbar-brand" href="http://localhost:3000">Buy &amp; Sell</a>
        <button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse" id="navHeaderCollapse">
            <ul class="nav navbar-nav">
                <li><%= link_to "All Items", root_path %></li>
                <% Category.all.each do |category| %>
                    <li><%= link_to category.name, items_path(category: category.name) %></li>
                <% end %>
            </ul>
            <% if user_signed_in? %>
            <ul class="nav navbar-nav navbar-right">
                <li><%= link_to "New Item", new_item_path %></li>
                <li><%= link_to "Account", edit_user_registration_path %></li>
                <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
            </ul>
            <% else %>
            <ul class="nav navbar-nav navbar-right">
                <li><%= link_to "Sign Up", new_user_registration_path %></li>
                <li><%= link_to "Log In", new_user_session_path   %></li>
            </ul>
            <% end %>
        </div>
    </div> 
</div>

ruby html jquery erb
person Luka Kerr    schedule 28.06.2016    source источник
comment
Вы пробовали другие способы? т.е. CSS, вместо этого применяя display: none и display: block к относительным элементам   -  person wmash    schedule 28.06.2016
comment
Да пробовал, но результат тот же - кнопка не работает, все равно спасибо   -  person Luka Kerr    schedule 28.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы используете Bootstrap. Есть два шага: 1) Использование стандартного синтаксиса Bootstrap для панелей навигации и 2) Установка точки останова мобильного меню на 1000 пикселей.

1) Используйте стандартный синтаксис Bootstrap для панелей навигации.

Во-первых, просто адаптируйте свой код, чтобы он соответствовал примеру в разделе "Компоненты: панель навигации".

В вашем случае это будет:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">   
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navHeaderCollapse" aria-expanded="false">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="http://localhost:3000">Buy &amp; Sell</a>
    
    <div class="collapse navbar-collapse" id="navHeaderCollapse">

        <ul class="nav navbar-nav">
            <li><%= link_to "All Items", root_path %></li>
            <% Category.all.each do |category| %>
            <li><%= link_to category.name, items_path(category: category.name) %></li>
         <% end %>
        </ul>

        <% if user_signed_in? %>
            <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "New Item", new_item_path %></li>
            <li><%= link_to "Account", edit_user_registration_path %></li>
            <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
        </ul>

        <% else %>
            <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Sign Up", new_user_registration_path %></li>
            <li><%= link_to "Log In", new_user_session_path   %></li>
        </ul>
        <% end %>

    </div>
  </div> 
</div>

Вам не нужен пользовательский код jQuery! Bootstrap автоматически выполнит переключение мобильного меню за вас!

2) Установите точку останова мобильного меню на 1000 пикселей.

Bootstrap позволяет изменить точку останова мобильной панели навигации:

Изменение точки останова свернутой мобильной панели навигации

Панель навигации сворачивается в вертикальное мобильное представление, когда окно просмотра уже, чем $grid-float-breakpoint, и расширяется в горизонтальное немобильное представление, когда ширина окна просмотра составляет не менее $grid-float-breakpoint. Настройте эту переменную в исходном коде Sass, чтобы управлять свертыванием/развертыванием панели навигации. Значение по умолчанию — 768 пикселей (наименьший размер экрана планшета). Эта переменная определена в _variables.scss Bootstrap, а затем используется в _navbar.scss.

Если вы используете гем twbs/bootstrap-sass, очень легко переопределить $grid-float-breakpoint Переменная:

Вы можете переопределить переменные, просто переопределив переменную перед директивой @import.

В твоем случае:

// File: app/assets/stylesheets/application.scss

// Point at which the navbar becomes uncollapsed
$grid-float-breakpoint: 1001px;

// import bootstrap as usual
@import "bootstrap";
person Finn    schedule 28.06.2016
comment
Спасибо, хотя причина, по которой я использую jQuery, заключается в том, что на панели навигации при изменении размера окна некоторые навигационные ссылки перемещаются друг под другом, в результате чего мобильное меню не срабатывает, пока ширина окна не станет меньше 1000. - person Luka Kerr; 28.06.2016
comment
Вы можете настроить точку, в которой меню сворачивается в мобильное меню: панель навигации сворачивается в свое вертикальное мобильное представление, когда окно просмотра уже, чем $grid-float-breakpoint, и расширяется в горизонтальное немобильное представление, когда окно просмотра находится в минимум $grid-float-breakpoint по ширине. Настройте эту переменную в исходном коде Sass, чтобы управлять свертыванием/развертыванием панели навигации. Значение по умолчанию — 768 пикселей (наименьший размер экрана планшета). Эта переменная определена в _variables.scss Bootstrap, а затем используется в _navbar.scss. Как вы загружаете Bootstrap? Может быть, я могу помочь... - person Finn; 28.06.2016
comment
Я загружаю бутстрап через рубиновый драгоценный камень, поэтому на самом деле у меня нет ни одного из этих файлов scss. Можно ли как-нибудь настроить значение $grid-float-breakpoint? - person Luka Kerr; 29.06.2016
comment
На самом деле не волнуйтесь, я только что вручную загрузил bootstrap и изменил значение точки останова сетки на 1000 пикселей. Затем просто скопировал некоторые файлы в папку поставщика и потребовал их. Теперь он работает! Спасибо за помощь - person Luka Kerr; 29.06.2016
comment
Отличная работа, Лука! Я также обновил свой ответ о том, как это сделать с помощью twbs/bootstrap-sass gem на случай, если вы захотите продолжить использовать драгоценный камень (или другие люди, у которых такая же проблема). Надеюсь, что вы используете именно этот гем (а не twbs/bootstrap-rubygem). Если последнее, дайте мне знать, я также рад помочь с этим. - person Finn; 29.06.2016