Jquery 手风琴没有删除类，也没有将其展开文本交换为折叠

Posted 2023-03-24

【中文标题】Jquery 手风琴没有删除类，也没有将其展开文本交换为折叠

【英文标题】：Jquery accordion not removingClass and not swapping its Expand text for Collapse

【发布时间】：2011-06-06 03:53:36

【问题描述】：

感谢@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();
);

谢谢！！

【参考方案1】：

这是我的尝试：

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

Example link. 由于.swap 链接对所有人都是通用的，因此无需将其放在each 循环中。

【讨论】：

这看起来非常好，我非常感谢您付出额外的努力。谢谢ifaour

@ifaour - 现在我已经看到当它们全部展开时会发生什么，一些菜单，例如第 3 节下的那些，不包含子链接。我认为项目符号应该只在菜单包含子链接时显示活动状态。你怎么看？

@ifaour - 再次。谢谢。你的贡献真的帮助了我的项目。

啊！真的..对不起，我没有注意到，正在尝试解决“全部展开/全部折叠”问题:-)

@Evan：我已经 edited 你的代码并用 one 行替换了整个 acitem 切换的东西，我没有知道这是否是你想要的......我没有碰你的noaccordion，但你可以明白

【参考方案2】：

您已经很接近了，问题存在于您使用 .text() 设置链接的位置。

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

该行代码尝试在 $(this) 上设置文本并返回 $(this).text().prev() == 'Click to Collapse');

$(this).text() 返回字符串“点击折叠”。

.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');
                    
            
    );

【讨论】：

这里是更新后的代码：jsbin.com/ucobo3/5 我按照你的建议做了，但我在 else 语句中做了“点击展开”，手风琴将展开所有内容，但文本不会交换说“全部折叠”，当我现在单击该链接时，该链接不再有效。如果我按照您建议的方式进行操作，菜单将在此处弹跳并自行关闭，如下所示：jsbin.com/ucobo3/4

检查您的 javascript，您连续四次绑定了 .swap 点击。将它移到您的 initMenu 调用之外。您还必须对其稍作修改，但这应该可以解决问题。