Раскрывающийся список (dropdown) на jQuery

Question

Есть скрипт раскрывающего списка (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>

Answer 1

Для начала, обернем текст внутри Вашего опенера который нужно заменить в 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>

БЛОГ НА HUSL

Раскрывающийся список (dropdown) на jQuery

Ответы (1 шт):