Jquery аккордеон не удаляет Class и не меняет свой текст Expand на Collapse - PullRequest
Новая
       22

Jquery аккордеон не удаляет Class и не меняет свой текст Expand на Collapse

0 голосов
/ 09 января 2011

Спасибо @ifaour за большую помощь! Этот скрипт включает в себя:

  • Jquery аккордеон с использованием неупорядоченных списков.
  • Активные и неактивные состояния с переключаемыми изображениями стрелок пули
  • Развернуть все / Свернуть все, что меняет текст.
  • Столбцы равной высоты, которые расширяются и разрушаются, когда аккордеон расширяется и разрушается

Демонстрацию можно посмотреть здесь http://jsbin.com/ucobo3/24/

(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
if ($.browser.msie && $.browser.version == 6.0) { $(this).height(tallest); }
$(this).css('min-height', tallest + 'px').css('overflow', 'auto');
});
}
})(jQuery);

jQuery.fn.initMenu = function() {
  var isCollapsed = true; // default value
  var collapseAll = 'Collapse All';
  var expandAll = 'Expand All';

  $('.swap').click(function() {
    if(!isCollapsed)
    {
      $('ul.menu li ul').slideUp('normal');
      $('ul.menu li').removeClass('active');
      $(this).text(expandAll);

      isCollapsed = true;
    } else {
      $('ul.menu li ul').slideDown('normal');
      $('ul.menu li').addClass('active');
      $(this).text(collapseAll);
      isCollapsed = false;
    }
    return false;
  });

  return this.each(function(){
    var theMenu = $(this).get(0);
    $('.acitem', this).hide();
    $('li.expand > .acitem', this).show();
    $('li.expand > .acitem', this).prev().addClass('active');
    $('li a', this).click(
    function(e) {
      e.stopImmediatePropagation();
      var theElement = $(this).next();
      var parent = this.parentNode.parentNode;
      if($(parent).hasClass('noaccordion')) {
        if(theElement[0] === undefined) {
          window.location.href = this.href;
        }
        $(theElement).slideToggle('normal', function() {
          if ($(this).is(':visible')) {
            $(this).parent().addClass('active');
          }
          else {
            $(this).prev().parent().removeClass('active');
          }    
        });
        return false;
      }
      else {
        if(theElement.hasClass('acitem') && theElement.is(':visible')) {
          if($(parent).hasClass('collapsible')) {
            $('.acitem:visible', parent).first().slideUp('normal',
            function() {
              $(this).prev().parent().removeClass('active');
            }
          );
            return false;  
          }
          return false;
        }
        if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
          $('.acitem:visible', parent).first().slideUp('normal', function() {
            $(this).prev().parent().removeClass('active');
          });
          theElement.slideDown('normal', function() {
            $(this).prev().parent().addClass('active');
          });
          return false;
        }


      }
    }
  );

  });
};

$(document).ready(function() {
  $('.menu').initMenu();          
  $('.column').equalHeights();
});

Спасибо !!

Ответы [ 2 ]

1 голос
/ 10 января 2011

Вот моя попытка: 

jQuery.fn.initMenu = function() {
    var isCollapsed = true; // default value
    var collapseAll = 'Collapse All';
    var expandAll = 'Expand All';

    $('.swap').click(function() {
        if(!isCollapsed)
        {
            $('ul.menu li ul').slideToggle('normal');
            $('ul.menu li a').removeClass('active');
            $(this).text(expandAll);
            isCollapsed = true;
        } else {
            $('ul.menu li ul').slideToggle('normal');
            $('ul.menu li a').addClass('active');
            $(this).text(collapseAll);
            isCollapsed = false;
        }
        return false;
    });

    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand > .acitem', this).show();
        $('li.expand > .acitem', this).prev().addClass('active');
        $('li a', this).click(
        function(e) {
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;
            if($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).addClass('active');
                    }
                    else {
                        $(this).prev().removeClass('active');
                    }    
                });
                return false;
            }
            else {
                if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                    if($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal',
                        function() {
                            $(this).prev().removeClass('active');
                        }
                    );
                        return false;  
                    }
                    return false;
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                    $('.acitem:visible', parent).first().slideUp('normal', function() {
                        $(this).prev().removeClass('active');
                    });
                    theElement.slideDown('normal', function() {
                        $(this).prev().addClass('active');
                    });
                    return false;
                }


            }
        }
    );

    });
};

$(document).ready(function() {$('.menu').initMenu();});

Пример ссылки .
Поскольку ссылка .swap является общей для всех, нет необходимости иметь ее внутри цикла each.

0 голосов
/ 09 января 2011

Вы довольно близки, проблема в том, что вы используете .text () для установки ссылки. 

$(this).text($(this).text().prev() == 'Click to Collapse');

Эта строка кода пытается установить текст на $ (this)с возвращением $(this).text().prev() == 'Click to Collapse');

$(this).text() возвращает строку «Click to Collapse».

.prev() не является допустимой функцией для строк, поэтому приведет к ошибке JavaScript.

То, что вы хотите сделать, это $(this).text("Click to Expand");

Конечный результат будетбыть примерно таким: 

$('.swap').click(function()
            {
                if($(this).text() == 'Click to Collapse')
                {
                    $('ul.menu li ul').slideToggle('normal');
                $('ul.menu li a').removeClass('active');
                    $(this).text('Click to Expand');
                }else{
                    $('ul.menu li ul').slideToggle('normal');
                $('ul.menu li a').addClass('active');
                    $(this).text('Click to Collapse');
                    }
            }
    );
...