Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   нужно немного переделать тумлер на селекте (https://javascript.ru/forum/jquery/66261-nuzhno-nemnogo-peredelat-tumler-na-selekte.html)

sunat1709@mail.ru 04.12.2016 14:18

нужно немного переделать тумлер на селекте
 
есть такой код
$(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 селектов. при открытии одного и клике на другой никакой из них не закрывается. помогите срочно!

рони 04.12.2016 14:40

sunat1709@mail.ru,
может полный пример на пару селектов, здесь или в другой песочнице?

sunat1709@mail.ru 04.12.2016 14:49

вот сами селекты. обычные селекты
 
<select class="makeMeFancy">
  <option data-icon="####">пункт</option>
</select>
<select class="makeMeFancy">
  <options data-icon="####">пункт</options>
</select>

думаю надо что то цикла замутить. выборку из цикла класса expanted, и задать им удаление класса. я примерно понял что надо делать. но реализовать не могу, так как не владею JS а только PHP немного.

рони 04.12.2016 14:53

sunat1709@mail.ru,
макет это всё полностью и html и css и js.
строка 98 в конец
$('.dropDown').not(dropDown).trigger('hide');

рони 04.12.2016 15:02

sunat1709@mail.ru,
ненужно уже ничего смотрите пост №4

sunat1709@mail.ru 04.12.2016 15:09

ура! получилось!
 
спасибо огромное! вроде какая-то мелочь, а 4 день не мог решить! благодарю! хорошо что есть такие люди как Вы!:dance: :dance: :dance: :thanks: :thanks: :thanks:


Часовой пояс GMT +3, время: 18:20.