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>

我正在使用冷融合。 master 函数循环 1 到 X 并创建类似于：

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

我的问题是当我单击主切换时，我必须双击迷你切换才能打开折叠的 div。有没有办法将 toggle(even,odd) 更改为 toggle(odd,even) ？ 谢谢

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 个函数作为参数，但 toggle 需要任何一个

• 布尔显示或隐藏
• 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);

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