Огромное спасибо!
Работает как надо, за исключением некоторых моментов, которые я частично смог доработать, какие-то нет.
Поскольку у меня при работе с разными списками должны отрабатывать разные функции, то я добавил внутри функции if.
Работает.
И еще пара момент.
При нажатии на a.slct - этой ссылке должен присваиваться .active
Я вроде смог это прописать.
А вот убрать его получилось не во всех случаях.
1) Если клик по странице вне списка - сделал, убирается, хорошо.
2) Если нажать на элемент списка (выбрать новый пункт) - тоже убирается, хорошо.
3) Если открыть список и нажать на a.slct, т.е. не менять выбранный, то класс active у .slct остается.
и еще момент, не знаю на сколько это можно реализовать...
Когда список закрывается - то снимается класс active у .slct.
Поскольку при стилизации меняется border-radius, то при сворачивании списка - получается не красиво.
МОжно ли как-то удаление класса active у .slct отложить на время сворачивания. Можно было бы задержку какую-то выставить вручную, но проблема в том что длина списков разная. Где-то 1 пункт, где-то 10-50. Соответсвенно время сворачивания разное.
Вот что у меня сейчас получилось.
$(function() {
$(".select").on("click", ".slct, li", function(event) {
event.preventDefault();
$(this).parent().find(".slct").addClass("active");
var parent = event.delegateTarget;
$(".drop", parent).slideToggle();
if ($(this).is("li")) {
event.stopPropagation();
$(this).addClass("active").siblings().removeClass("active");
var title = this.textContent.trim();
$(".slct", parent).text(title);
$("input", parent).val(title);
calculate();
if ($(this).parent().hasClass("drop_model")) {
selectLiImageNumber(title)
checkSizeRadio();
} else if ($(this).parent().hasClass("drop_stella")) {
showModelUl();
checkSizeRadio();
}
$(".slct").removeClass("active");
}
}).find("li:first").addClass("active");
$(document).click(function(event) {
$(event.target).closest(".select").length || $(".select .drop").slideUp() && $(".slct").removeClass("active");
});
});
