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

我正在使用此功能來切換我的面板,但這是第二次點擊而不是第一次發生什麼錯誤。切換功能發生在第二次點擊

+0

當'toggleDiv'執行? – 2010-09-07 13:20:26

+0

我正在使用列表項目中的圖像和點擊一個圖像我打電話這個功能以及我正在使用你昨天回答的一個simillar方法 – Mac 2010-09-07 13:43:54

回答

3

左右切換兩個功能

+1

在這種情況下,它需要3次點擊 – Mac 2010-09-07 13:58:00

0

試試這個;

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

那麼,在切換函數中存在一些不確定性。不是通過設計或功能,而是通過我們使用它的方式。我有很多次遇到過這個問題,比如,如果我在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'); 
     } 
    }