Темизированный выпадающий список

Тэги: 

Набросок выпадающего списка, не полнофункциональный, только темизированная часть.
Всяко лучше чем подключать дополнительные, плагины и шаблоны.

select-list.png

html:

  1. <div class="drop-down-list">
  2. <div id="sel-id-1" class="selected">Пункт 1</div>
  3. <div id="sel-id-2">Пункт 2</div>
  4. </div>

javascript:

  1. $('.drop-down-list > div').click(function() {
  2. var _this = $(this);
  3.  
  4. if (!_this.parent().hasClass('expanded')) {
  5.  
  6. _this.parent().addClass('expanded');
  7.  
  8. $(document).unbind("click");
  9. $(".drop-down-list").bind('mouseout',function(){
  10. $(document).bind("click",function(){
  11. $(".drop-down-list").removeClass('expanded');
  12. });
  13. });
  14.  
  15. } else {
  16. _this.parent().removeClass('expanded');
  17. }
  18.  
  19. if (!_this.hasClass('selected')) {
  20. _this.parent().find('div').each(function() {
  21. $(this).removeClass('selected');
  22. });
  23. _this.addClass('selected');
  24. }
  25. });