切换功能发生在第二次点击

Question

function toggleDiv() 
    { 
     $('#myDiv').toggle(function() 
     { 
      $('.pnlMyarea').slideDown(); 
      $('#separator').hide(); 
      $('#manualInsert').css('margin-top', '15px'); 
     }, 
     function() 
     { 
      $('.pnlMyarea').slideUp(); 
      $('#separator').show(); 
      $('#manualInsert').css('margin-top', '42px'); 
     }); 
    } 

我正在使用此功能来切换我的面板，但这是第二次点击而不是第一次发生什么错误。

Answer 1

左右切换两个功能

Answer 2

试试这个;

$(document).ready(function() { 
    $('#myBtn').click()(function(){ 
    $('#myDiv').toggle(function() 
    { 
     $('.pnlMyarea').slideDown(); 
     $('#separator').hide(); 
     $('#manualInsert').css('margin-top', '15px'); 
    }, 
    function() 
    { 
     $('.pnlMyarea').slideUp(); 
     $('#separator').show(); 
     $('#manualInsert').css('margin-top', '42px'); 
    }); 
    }); 
}); 

Answer 3

那么，在切换函数中存在一些不确定性。不是通过设计或功能，而是通过我们使用它的方式。我有很多次遇到过这个问题，比如，如果我在ahref点击设置了切换可见性处理程序，并且其他一些操作将其隐藏/通过其他一些事件显示它，例如ajax加载，切换将不会跟踪它，它会做它应该做的事情，即替代行动到前面的。另外，你必须保持自己的两个切换功能的顺序。

因此，为了像这样的隐藏/显示切换需求，我钻了一个更明显和可控的解决方案。检查代码。通过这种方式，即使出现其他事件，我也可以显示/隐藏，并且它通常会被类别showing跟踪。长期运行并在页面上处理大量事件时很有帮助。相信我。

function toggleDiv(div) 
    { 
     if($(div).hasClass('showing')) 
     { 
      $('.pnlMyarea').slideUp(); 
      $('#separator').show(); 
      $('#manualInsert').css('margin-top', '42px');     
      $(div).removeClass('showing'); 
     } 
     else 
     {   
      $('.pnlMyarea').slideDown(); 
      $('#separator').hide(); 
      $('#manualInsert').css('margin-top', '15px'); 
      $(div).addClass('showing'); 
     } 
    } 

或简单地

function toggleDiv() 
    { 
     if($('.pnlMyarea:visible').length > 0) 
     { 
      $('.pnlMyarea').slideUp(); 
      $('#separator').show(); 
      $('#manualInsert').css('margin-top', '42px');     
     } 
     else 
     {   
      $('.pnlMyarea').slideDown(); 
      $('#separator').hide(); 
      $('#manualInsert').css('margin-top', '15px'); 
     } 
    }