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个函数作为参数，但切换需要

boolean showOrHide
int duration，function callback
int duration，string easing，function callback

显然，您使用.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);

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

jquery切换问题

2 个答案: