1

Есть скрипт раскрывающего списка (dropdown) на jQuery. Как сделать, что бы при клике на одну из выпадающих ссылок список закрывался, а на место <a href="#"><span>Ссылки:</span> Все</a> вместо "Все" подставлялся текст из ссылки, на которую нажали?

jQuery('.user-columns-meta > a').click(function(e) {
  e.preventDefault();

  if (jQuery('.user-columns-meta').hasClass('open')) {
    jQuery('.user-columns-meta-links').slideUp();
    jQuery('.user-columns-meta').removeClass('open');
  } else {
    jQuery('.user-columns-meta-links').slideDown();
    jQuery('.user-columns-meta').addClass('open');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns_dropdown">
  <div class="user-columns-meta">
    <a href="#"><span>Ссылки:</span> Все</a>
  </div>
  <div class="user-columns-meta-links" style="display: none;">
    <ul>
      <li><a href="#">Все</a></li>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
    </ul>
  </div>
</div>

1 ответ 1

2

Для начала, обернем текст внутри Вашего опенера который нужно заменить в span, не знаю зачем Вам span вокруг слова "Ссылка" (предположу что чтобы что-то подстилить), но я его оставлю и найду текст который нужно заменить посредством id="textToReplace" для наглядности. Затем вынесем функционал открытия и закрытия в отдельные функции, чтобы не дублировать код. Добавим слушатель на событие клик по нажатию на ссылку из дропдауна, где возьмем текст с того элемента на который нажали и заменим текст в элемент id="textToReplace" Вашего опенера.

var openerHolder = jQuery('.user-columns-meta');
var opener = openerHolder.find('a');
var dropdown = jQuery('.user-columns-meta-links');
var dropdownLinks = dropdown.find('a');
var textToReplace = opener.find('#textToReplace');

function openDropdown(dropdown, opener) {
  dropdown.slideDown();
  opener.addClass('open');
}

function closeDropdown(dropdown, opener) {
  dropdown.slideUp();
  opener.removeClass('open');
}

opener.click(function(e) {
  e.preventDefault();

  if (openerHolder.hasClass('open')) {
    closeDropdown(dropdown, openerHolder);
    return;
  }
  openDropdown(dropdown, openerHolder);
});

dropdownLinks.click(function(e) {
  e.preventDefault();
  
  var linkText = $(this).text();
  textToReplace.text(linkText);
  closeDropdown(dropdown, openerHolder);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns_dropdown">
  <div class="user-columns-meta">
    <a href="#"><span>Ссылки:</span> <span id="textToReplace">Все</span></a>
  </div>
  <div class="user-columns-meta-links" style="display: none;">
    <ul>
      <li><a href="#">Все</a></li>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
    </ul>
  </div>
</div>

2
  • span:last-child - лучше использовать классы|id для привязки, чтобы не менять скрипты если верстка поменялась
    – br3t
    17 дек 2021 в 12:37
  • @br3t согласен, но в данном случае не совсем понимаю зачем был первый спан, потому и указал об этом в сообщении, решил что при необходимости это заменят на то что будет более удобным. Но все же заменю на ID в примере для лучшей наглядности. Спасибо!
    – Simon
    17 дек 2021 в 12:50

Ваш ответ

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

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