Пропадает выпадающее меню?

Question

[dratsky]

Прописал на сайте через html при помощи bootstrap 4 главное меню с выпадающим. При выборе выпадающего оно исчезает, если ткнуть в другое место или по какому-нибудь его подпункту. Что делать, чтобы этого не происходило ?

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          О нас
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="http://cw68466.tmweb.ru/index.php/o-nas">О компании </a>
          <a class="dropdown-item" href="http://cw68466.tmweb.ru/index.php/otzyvy34453534">Отзывы</a>
        </div>
		<li class="nav-item active">
        <a class="nav-link" href="http://cw68466.tmweb.ru/index.php/kontakty">Контакты</a>
      </li>
	  <li class="nav-item active">
        <a class="nav-link" href="http://cw68466.tmweb.ru/index.php/izbrannoe"><span class="oi oi-star" title="star" aria-hidden="true"></span>Избранное</a>
      </li>
      </li>

Comments

[dratsky]

Кажется, нашёл в bootstrap.jp от bootstrap 4 код, отвечающий за очистку выпадающего меню. Может подскажет то, как его надо переделать. чтобы при повторном нажатии на кнопку выпадающего меню или в любое другое место исчезали только пункты выпадающего меню, а не оно само ?

Dropdown._clearMenus = function _clearMenus(event) {
        if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH || event.type === 'keyup' && event.which !== TAB_KEYCODE)) {
          return;
        }

        var toggles = $$$1.makeArray($$$1(Selector.DATA_TOGGLE));

        for (var i = 0; i < toggles.length; i++) {
          var parent = Dropdown._getParentFromElement(toggles[i]);

          var context = $$$1(toggles[i]).data(DATA_KEY);
          var relatedTarget = {
            relatedTarget: toggles[i]
          };

          if (!context) {
            continue;
          }

          var dropdownMenu = context._menu;

          if (!$$$1(parent).hasClass(ClassName.SHOW)) {
            continue;
          }

          if (event && (event.type === 'click' && /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) && $$$1.contains(parent, event.target)) {
            continue;
          }

          var hideEvent = $$$1.Event(Event.HIDE, relatedTarget);
          $$$1(parent).trigger(hideEvent);

          if (hideEvent.isDefaultPrevented()) {
            continue;
          } // If this is a touch-enabled device we remove the extra
          // empty mouseover listeners we added for iOS support


          if ('ontouchstart' in document.documentElement) {
            $$$1(document.body).children().off('mouseover', null, $$$1.noop);
          }

          toggles[i].setAttribute('aria-expanded', 'false');
          $$$1(dropdownMenu).removeClass(ClassName.SHOW);
          $$$1(parent).removeClass(ClassName.SHOW).trigger($$$1.Event(Event.HIDDEN, relatedTarget));
        }
      };

Answer 1

[iBird Rose]

к примеру повесь класс .noclose на <li class="nav-item dropdown">
и обработчик:

$(document).on('click','.noclose',function(e){
		e.stopPropagation();
	});

Answer 2

[dratsky]

Прописал в код <li class="nav-item dropdown noclose">

в конец bootstrap.js

$(document).on('click','.noclose',function(e){
    e.stopPropagation();
  });

Не помогло

Answer 3

[Павел Грузных]

При клике вне пункта меню к нему почему-то придаётся стиль, скрывающий данный элемент:

<li class="nav-item dropdown" style="display: none;">

Ищи, в каком-то из подключенных js у тебя срабатывает скрытие. Мне что-то подсказывает, что отсюда ноги растут.

Comments

[dratsky]

Кажется, нашёл в bootstrap.jp от bootstrap 4 код, отвечающий за очистку выпадающего меню. Может подскажет то, как его надо переделать. чтобы при повторном нажатии на кнопку выпадающего меню или в любое другое место исчезали только пункты выпадающего меню, а не оно само ?

Dropdown._clearMenus = function _clearMenus(event) {
        if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH || event.type === 'keyup' && event.which !== TAB_KEYCODE)) {
          return;
        }

        var toggles = $$$1.makeArray($$$1(Selector.DATA_TOGGLE));

        for (var i = 0; i < toggles.length; i++) {
          var parent = Dropdown._getParentFromElement(toggles[i]);

          var context = $$$1(toggles[i]).data(DATA_KEY);
          var relatedTarget = {
            relatedTarget: toggles[i]
          };

          if (!context) {
            continue;
          }

          var dropdownMenu = context._menu;

          if (!$$$1(parent).hasClass(ClassName.SHOW)) {
            continue;
          }

          if (event && (event.type === 'click' && /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) && $$$1.contains(parent, event.target)) {
            continue;
          }

          var hideEvent = $$$1.Event(Event.HIDE, relatedTarget);
          $$$1(parent).trigger(hideEvent);

          if (hideEvent.isDefaultPrevented()) {
            continue;
          } // If this is a touch-enabled device we remove the extra
          // empty mouseover listeners we added for iOS support


          if ('ontouchstart' in document.documentElement) {
            $$$1(document.body).children().off('mouseover', null, $$$1.noop);
          }

          toggles[i].setAttribute('aria-expanded', 'false');
          $$$1(dropdownMenu).removeClass(ClassName.SHOW);
          $$$1(parent).removeClass(ClassName.SHOW).trigger($$$1.Event(Event.HIDDEN, relatedTarget));
        }
      };

[Павел Грузных]

dratsky, вряд ли виноваты скрипты Bootstrap, смотри: как только я заблокировал через баннерорезку подгрузку этого скрипта на твоем сайте, у меня всё стало хорошо, пункт не скрывается.

Попробуй отключить у себя на сайте Ark Editor и увидишь, что всё стало нормально.