0

Есть вот такой элемент:

$(document).on('click', '.dropdown_services_link', function() {

  let text = $(this).text();
  $(this).parent().parent().prev().text(text);
  $('.dropdown_button_add_services__container').show();

})

$(document).on('click', '.dropdown_button_add_services', function() {

  $(this).parent().prev().after($(this).parent().prev().clone().css({
    'marginTop': '15px'
  }));

})

$(document).on('shown.bs.dropdown', '.dropdown_services', function() {

  $(this).children().eq(0).addClass('button_services__opened');

})

$(document).on('hidden.bs.dropdown', '.dropdown_services', function() {

  $(this).children().eq(0).removeClass('button_services__opened');

});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="order-info order-info__date">
  <div class="order-info__header">
    <span>Дополнительные услуги</span>
  </div>
  <div class="order-info__inner order-info__inner___dropdown">
    <div class="dropdown dropdown_services">
      <button class="btn dropdown-toggle button_services" type="button" id="dropdownServices" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          Выберите услугу
        </button>
      <ul class="dropdown-menu dropdown_services_menu" aria-labelledby="dropdownServices">
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Колеровка</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Оверлок</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Установка</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Демонтаж</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Колеровка</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Оверлок</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Установка</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Демонтаж</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Колеровка</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Оверлок</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Установка</a>
        </li>
        <li class="dropdown_services_item">
          <a href="javascript:void(0);" class="dropdown_services_link">Демонтаж</a>
        </li>
      </ul>
    </div>
    <div class="dropdown_button_add_services__container">
      <div class="dropdown_button_add_services">
        <svg class="dropdown_button_add_services_svg" width="24" height="24" viewBox="0 0 24 24" fill="#0078D7" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 11H13V9C13 8.45 12.55 8 12 8C11.45 8 11 8.45 11 9V11H9C8.45 11 8 11.45 8 12C8 12.55 8.45 13 9 13H11V15C11 15.55 11.45 16 12 16C12.55 16 13 15.55 13 15V13H15C15.55 13 16 12.55 16 12C16 11.45 15.55 11 15 11ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20ZM12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2Z" fill="#0078D7"/>
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M15 11H13V9C13 8.45 12.55 8 12 8C11.45 8 11 8.45 11 9V11H9C8.45 11 8 11.45 8 12C8 12.55 8.45 13 9 13H11V15C11 15.55 11.45 16 12 16C12.55 16 13 15.55 13 15V13H15C15.55 13 16 12.55 16 12C16 11.45 15.55 11 15 11ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20ZM12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2Z" fill="white"/>
            </mask>
            <g mask="url(#mask0)">
            </g>
          </svg>
        <div class="dropdown_button_add_services_link">
          <a href="javascript:void(0);" class="dropdown_button_add_services_link___button">Добавить услугу</a>
        </div>
      </div>
    </div>
  </div>
</div>

Выполненный через dropdown от bootstrap.

Не могу понять, почему в мобильной версии не отрабатывает вот эта конструкция $(this).parent().parent().prev().text(text); с десктопа всё ок.

2
  • А что за браузер на телефоне? версия? 3 дек 2020 в 8:24
  • без разницы какой, даже если я в том же хроме с десктопа открою мобильную версию, и загружу страницу в таком режиме - не работает 3 дек 2020 в 9:09

1 ответ 1

0

Разобрался в чём дело, оказывается бутстрап создаёт пустой див после кнопки внутри контейнера, заменил метод поиска элемента на $(this).parent().parent().parent().children('.button_services').text(text); и всё заработало

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.