нужно немного переделать тумлер на селекте
есть такой код
$(document).ready(function(){ $('select.makeMeFancy').tzSelect({ render : function(option){ return $('<li>',{ html: '<img src="'+option.data('icon')+'" /><span>'+ option.data('html-text')+'</span>' }); }, className : 'hasDetails' }); // Calling the default version of the dropdown $('select.regularSelect').tzSelect(); }); (function($){ $.fn.tzSelect = function(options){ options = $.extend({ render : function(option){ return $('<li>',{ html : option.text() }); }, className : '' },options); return this.each(function(){ // The "this" points to the current select element: var select = $(this); var selectBoxContainer = $('<div>',{ width : select.outerWidth(), className : 'tzSelect', html : '<div class="selectBox"></div>' }); var dropDown = $('<ul>',{className:'dropDown'}); var selectBox = selectBoxContainer.find('.selectBox'); // Looping though the options of the original select element if(options.className){ dropDown.addClass(options.className); } select.find('option').each(function(i){ var option = $(this); if(i==select.attr('selectedIndex')){ selectBox.html(option.text()); } // As of jQuery 1.4.3 we can access HTML5 // data attributes with the data() method. if(option.data('skip')){ return true; } // Creating a dropdown item according to the // data-icon and data-html-text HTML5 attributes: var li = options.render(option); li.click(function(){ selectBox.html(option.text()); dropDown.trigger('hide'); // When a click occurs, we are also reflecting // the change on the original select element: select.val(option.val()); $( "form:first" ).trigger( "submit" ); return false; }); dropDown.append(li); }); selectBoxContainer.append(dropDown.hide()); select.hide().after(selectBoxContainer); // Binding custom show and hide events on the dropDown: dropDown.bind('show',function(){ if(dropDown.is(':animated')){ return false; } selectBox.addClass('expanded'); dropDown.slideDown(); }).bind('hide',function(){ if(dropDown.is(':animated')){ return false; } selectBox.removeClass('expanded'); dropDown.slideUp(); }).bind('toggle',function(){ if(selectBox.hasClass('expanded')){ dropDown.trigger('hide'); } else dropDown.trigger('show'); }); selectBox.click(function(){ dropDown.trigger('toggle'); return false; }); // If we click anywhere on the page, while the // dropdown is shown, it is going to be hidden: $(document).click(function(){ dropDown.trigger('hide'); }); }); } })(jQuery); так вот, у меня 8 селектов. при открытии одного и клике на другой никакой из них не закрывается. помогите срочно! |
sunat1709@mail.ru,
может полный пример на пару селектов, здесь или в другой песочнице? |
вот сами селекты. обычные селекты
<select class="makeMeFancy"> <option data-icon="####">пункт</option> </select> <select class="makeMeFancy"> <options data-icon="####">пункт</options> </select> думаю надо что то цикла замутить. выборку из цикла класса expanted, и задать им удаление класса. я примерно понял что надо делать. но реализовать не могу, так как не владею JS а только PHP немного. |
sunat1709@mail.ru,
макет это всё полностью и html и css и js. строка 98 в конец $('.dropDown').not(dropDown).trigger('hide'); |
sunat1709@mail.ru,
ненужно уже ничего смотрите пост №4 |
ура! получилось!
спасибо огромное! вроде какая-то мелочь, а 4 день не мог решить! благодарю! хорошо что есть такие люди как Вы!:dance: :dance: :dance: :thanks: :thanks: :thanks:
|
Часовой пояс GMT +3, время: 18:20. |