jquery切换问题

Question

我正在尝试创建一个主切换功能，它将折叠/展开所有迷你切换。我的迷你切换功能是：

$('.tog').toggle(
   function(){ 
      $('#togStat').val(1);
      var myID = $(this).attr("id").split('-')[1];
      $('#collapseObj-'+myID).hide();
      $('#collapseImg-'+myID).attr({src:'images/collapse_tcat_collapsed.gif'});
   },
   function(){ 
      $('#togStat').val(0);
      var myID = $(this).attr("id").split('-')[1];
      $('#collapseObj-'+myID).show();
      $('#collapseImg-'+myID).attr({src:'images/collapse_tcat.gif'});
});

主功能是：

    <cfoutput>
      $('.togAll').toggle(
   function(){
      <cfloop from="1" to="10" index="i">
      $('##collapseObj-#i#').hide();
      $('##collapseImg-#i#').attr({src:'images/collapse_tcat_collapsed.gif'});
      </cfloop>
      $('##collapseImg-All').attr({src:'images/expand_icon.png'}); 
      $('##collapseImg-All').attr({title:'expand all'}); 
      $('##collapseImg-All').attr({alt:'expand all'}); 
   },
   function(){ 
      <cfloop from="1" to="#getMaxCatID.catID#" index="i">
      $('##collapseObj-#i#').show();
      $('##collapseImg-#i#').attr({src:'images/collapse_tcat.gif'});
      </cfloop>
      $('##collapseImg-All').attr({src:'images/collapse_icon.png'}); 
      $('##collapseImg-All').attr({title:'collapse all'});
      $('##collapseImg-All').attr({alt:'collapse all'});
      });
      </cfoutput>

我正在使用 Coldfusion。主函数循环从 1 到 X 并创建类似于以下内容的内容：

 $('#collapseObj-1').hide();
 $('#collapseObj-2').hide();
 $('#collapseObj-1').hide();

我的问题是当我单击主切换时，我必须双击迷你切换才能打开折叠的 div。有没有办法将切换（偶数，奇数）更改为切换（奇数，偶数）？ 谢谢

Answer 1

这似乎与 onclick 操作相关：

   if (!$('#collapseObj-1').is(':hidden')) {
        $('#collapseObj-1').hide();
        $('#collapseImg-1').attr({src:'images/collapse_tcat.gif'});
     } else {
        $('#collapseObj-1').show();     
        $('#collapseImg-1').attr({src:'images/collapse_tcat_collapsed.gif'});
     }

Answer 2

首先，jQuery.toggle 实际上切换可见性。您似乎将其视为具有 onShow 和 onHide 参数的函数，这是错误的。请参阅http://api.jquery.com/toggle/。按照您编写的方式，您有 2 个函数作为参数，但切换需要

• 布尔值 showOrHide
• int 持续时间、函数回调
• int 持续时间、字符串缓动、函数回调

显然您对 .toggle() 的使用是错误的。如果您想在发生某个事件时更改可见性，您可以使用一个函数来编写它，该函数根据其当前的可见性显示/隐藏一个迷你切换。我看不到 #togStat 的作用，但我保留了它。

var togStat = $('#togStat');

function miniToggle(id) {
    var elem = $('#collapseObj-' + id);
    if (elem.is(':visible')) {
        togStat.val(1);
        elem.hide();
        $('#collapseImg-' + id).attr({src: 'images/collapse_tcat_collapsed.gif'});
    } else {
        togStat.val(0);
        elem.show();
        $('#collapseImg-' + id).attr({src: 'images/collapse_tcat.gif'});
    }
}

您可以将其称为元素编号（如您的示例中所示），如下所示：

miniToggle(1);

我希望这对您有帮助。如果没有，您可能需要发布一个示例页面，以便我们可以查看实际的代码。