Появилась Uncaught Error: Syntax error, unrecognized expression: # при использования выпадающего меню Bootstrap 4

112

24 декабря 2020, 11:00

Пилю сайт, сначала был HTML шаблон, сейчас в процессе натяжки на WP. Во время натяжки на CMS появилась промежуточная задача от заказчика, один из пунктов меню сделать выпадающим. Начал делать, всё как обычно, в navbar меню добавил один раскрывающийся итем меню. После этого в консоли появилась ошибка, связанная с jquery. Фактически всё работает как задумывалось, проблем нет. Но красная консоль не дает покоя. Не могу понять в чем дело. Текст ошибки:

jquery-3.4.1.min.js?ver=5.1.1:2 Uncaught Error: Syntax error, unrecognized expression: #
at Function.se.error (jquery-3.4.1.min.js?ver=5.1.1:2)
at se.tokenize (jquery-3.4.1.min.js?ver=5.1.1:2)
at se.select (jquery-3.4.1.min.js?ver=5.1.1:2)
at Function.se [as find] (jquery-3.4.1.min.js?ver=5.1.1:2)
at k.fn.init.find (jquery-3.4.1.min.js?ver=5.1.1:2)
at new k.fn.init (jquery-3.4.1.min.js?ver=5.1.1:2)
at k (jquery-3.4.1.min.js?ver=5.1.1:2)
at HTMLAnchorElement. (lowdown.js?ver=5.1.1:5)
at HTMLDivElement.dispatch (jquery-3.4.1.min.js?ver=5.1.1:2)
at HTMLDivElement.v.handle (jquery-3.4.1.min.js?ver=5.1.1:2)
se.error @ jquery-3.4.1.min.js?ver=5.1.1:2
se.tokenize @ jquery-3.4.1.min.js?ver=5.1.1:2
se.select @ jquery-3.4.1.min.js?ver=5.1.1:2
se @ jquery-3.4.1.min.js?ver=5.1.1:2
find @ jquery-3.4.1.min.js?ver=5.1.1:2
k.fn.init @ jquery-3.4.1.min.js?ver=5.1.1:2
k @ jquery-3.4.1.min.js?ver=5.1.1:2
(anonymous) @ lowdown.js?ver=5.1.1:5
dispatch @ jquery-3.4.1.min.js?ver=5.1.1:2
v.handle @ jquery-3.4.1.min.js?ver=5.1.1:2

Ошибки появились после того, как добавил в своей меню такой код:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

Помогите, в чем проблема? Есть какой-то более менее просто способ решить ее?

Answer 1

Работает же...что не так то?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
  <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> 
    <a class="dropdown-item" href="#">Action1</a> 
    <a class="dropdown-item" href="#">Another action1</a> 
    <div class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Something else here1</a> 
  </div> 
</li> 
<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
  <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> 
    <a class="dropdown-item" href="#">Action2</a> 
    <a class="dropdown-item" href="#">Another action2</a> 
    <div class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Something else here2</a> 
  </div> 
</li>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Перемножить элементы таблицы jquery

Есть корзина интернет магазина, в которой стараюсь сделать перерасчет по клику ценыВ случае 1 товара проблем особых нет, но в случае 2х и более...

143

jQuery

Проблема с анимацией в select

пытаюсь стилизовать select, хочу сделать анимацию, что при клике на select и выборе нужного option, border-bottom будет менять цвет, а еще лучше это будет...

131

jQuery