f_society
@f_society
по граблям новичка

Как переделать скрипт улучшения списков, чтобы списки закрывались при выборе другого списка?

нашел улучшение списков makeMeFancy на множестве форумов. проблема в том что открытый список не закрывается при клике на другой спискок

<select class="makeMeFancy">
  <option data-icon="####">пункт</option>
</select>
<select class="makeMeFancy">
  <options data-icon="####">пункт</options>
</select>

и таких общее 8 штук

сам JS

$(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);

помогите переделать JS так чтобы работало закрытие открытого списка при открытии другого списка. заранее спасибо!
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
f_society
@f_society Автор вопроса
по граблям новичка
никто так и не помог... ( помогли на другом форуме JS
.bind('toggle',function(){
        if(selectBox.hasClass('expanded')){
          dropDown.trigger('hide');
        }
        else dropDown.trigger('show');
     $('.dropDown').not(dropDown).trigger('hide'); - всего одна эта строчка решает проблему
      });
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы