Несколько выпадающих списков с checkbox?

Question

[Яна Митрофанова]

Есть выпадающий список с checkbox: codepen.io/elmahdim/pen/hlmri. Но как можно сделать несколько таких списков? В данный момент, если у нас к примеру 2 списка на странице, то при клике на один откроется и второй) что логично, т.к. классы у них одинаковые. Можно просто скопировать JS для каждого списка отдельно, но это получится слишком объемно и не думаю что правильно. Прошу помочь

Answer 1

[Александр]

Первый самый блок меняешь на такой код и все работает.

$(".dropdown dt a").on('click', function() {
  $(this).parent().parent().find("dd ul").slideToggle('fast');
});

Comments

[Александр]

А вообще наркомания с переходами по родителям и поиском лично мне не очень нравится. В один прекрасный момент код становится малочитаемым.

[iBird Rose]

Александр: вангую. щас тс спросит "а че делать с чекбоксами? они во всех отмечаются("

[Александр]

iBird Rose: не отмечаются) я предусмотрел, можно сказать прованговал данный вопрос. Вот если она захочет данные эти куда-то передать, вот тут уже будет интересный цирк с конями.

[iBird Rose]

Александр: ты изменил только открытие. там еще есть функция прописывания отмеченных чекбоксов в сам селект

[Александр]

iBird Rose: а черт да. Я удалял лишний код. :D Ну ждем вопроса, но решение там схожее.

[Яна Митрофанова]

Александр: Вы угадали...Так что, подскажете мне "функция прописывания отмеченных чекбоксов в сам селект" ? Буду благодарна

[Александр]

Raina97:
Как-то так.

/*
	Dropdown with Multiple checkbox select with jQuery - May 27, 2013
	(c) 2013 @ElmahdiMahmoud
	license: http://www.opensource.org/licenses/mit-license.php
*/

$(".dropdown dt a").on('click', function() {
  $(this).parent().parent().find("dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
  $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.mutliSelect input[type="checkbox"]').on('click', function() {
  var title = $(this).find('.mutliSelect').find('input[type="checkbox"]').val(),
    title = $(this).val() + ",";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
       $(this).closest('.dropdown').find('.multiSel').append(html);
       $(".hida").hide();
  } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $(this).append(ret);

  }
});

[Яна Митрофанова]

Александр: Большое Вам спасибо!

Answer 2

[iBird Rose]

внутри функции работай с this

Comments

[Яна Митрофанова]

Я бы с радостью, но в JS и JQUERY не разбираюсь совсем