Как заставить всплывающее окно поиска работать с новым макетом и кодом меню? - PullRequest
Новая
       5

Как заставить всплывающее окно поиска работать с новым макетом и кодом меню?

0 голосов
/ 25 февраля 2020

Я пытаюсь создать новое меню для сайта, который работает и имеет pop-up search bar. Все работает, насколько поиск по текущему сайту / версии. Я добавил новый код меню на страницу разработчика вместе с кодом для поиска.

Мне не удается отобразить всплывающее окно / окно поиска при нажатии кнопки увеличительного стекла. Я смущен.

Вот код html, который я использую для поиска: 

<div class="hidden-xs navbar-form navbar-right">
    <a href="#search" class="search-form-tigger btn btn-success"  data-toggle="search-form"><i class="fa fa-search" aria-hidden="true"></i></a></div>               
<div class="search-form-wrapper">
    <form class="search-form" id="siq_searchForm" action="">
        <div class="input-group">
            <input type="search" name="s" class="search form-control" value="" placeholder="Type here to search...">
            <span class="input-group-addon" id="basic-addon2"><i class="fa fa-search" aria-hidden="true"></i></span>
        </div>
    </form>
</div>

А вот JS, который я использую, чтобы получить всплывающее окно для работа: 

$( document ).ready(function() {
  $('[data-toggle=search-form]').click(function() {
  $('.search-form-wrapper').toggleClass('open');
  $('.search-form-wrapper .search').focus();
  $('html').toggleClass('search-form-open');
});

$('[data-toggle=search-form-close]').click(function() {
    $('.search-form-wrapper').removeClass('open');
    $('html').removeClass('search-form-open');
});

$('.search-form-wrapper .search').keypress(function( event ) {
    if($(this).val() == "Search") $(this).val("");
});

$('.search-close').click(function(event) {
    $('.search-form-wrapper').removeClass('open');
    $('html').removeClass('search-form-open');
});

Также здесь есть ссылка на страницу разработчика.

Любая помощь будет принята с благодарностью!

Заранее спасибо!

1 Ответ

0 голосов
/ 25 февраля 2020

Код для всплывающего окна поиска действителен и работает, он просто не выполняется. Я считаю, что проблема в том, что у вас есть код, который вызывает ошибку и прерывает работу остальной части вашего JS. Посмотрите в консоли браузера, и вы увидите: 

index-menu-test.htm:2019 Uncaught TypeError: $(...).loopSlider is not a function
    at HTMLDocument.<anonymous> (index-menu-test.htm:2019)
    at j (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at Function.ready (jquery.js:2)
    at HTMLDocument.I (jquery.js:2)

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

...