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

嗯，切换功能存在一些不确定性。不是设计或功能，而是我们使用它。我自己多次面对这个问题，比如，如果我在ahref上设置切换可见性处理程序，并且其他一些动作隐藏它/由ajax加载等其他事件显示它，切换将不跟踪它，它将做它应该做的事情，即对前一个的替代行动。此外，您必须自己维护两种切换功能的顺序。

因此，为了切换像hide / show这样的需求，我深入研究了一个更加明显和受控制的解决方案。检查代码。这样我甚至可以通过其他事件显示/隐藏它，并且它将由类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');
        }
    }

Answer 3

试试这个;

$(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');
    });
  });
});

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

3 个答案: