2011-04-06 36 views
0

創建這個ajax風格的wordpress組合主題,我有點卡住如何做到這一點最後一件小事。可能超出範圍點擊功能jquery

基本上可以說你點擊右上角的「關於」鏈接,它會將該頁面的內容加載到div中。現在,一旦點擊了,我怎麼指定,如果再次點擊該鏈接,不再加載內容?

現在你會想到使用長度,這不是真正的問題。

這裏正在進行http://themes.thefinishedbox.com/portfolio/

這裏的主題鏈接的用於頂部導航的JavaScript:

$(function() { 
    $('#navigation ul > li a').each(function() { 

     $(this).click(function(e) { 

      $.ajaxSetup ({ 
       cache: false 
      }); 

      e.preventDefault(); 

      var $href = $(this).attr('href'); 

      var $loader = '<div id="whiteLoader" />'; 

      if($('#page').length == 0) { 

       $('<div id="page" />').insertAfter('#header'); 

       $('#page').queue(function() { 
        $(this).animate({height: '120px'}, 300); 
        $(this).html($loader); 
        $(this).animate({backgroundColor: '#fff'}, 300); 
        $(this).dequeue();      
       }); 

       $('#page').queue(function() { 
        $('#page').load($href + ' #pageEntry', function() { 
         var $height = $('#pageEntry').height(); 
         var $h = $height + 16; 
         $(this).animate({height: $h + 'px'}, 600, function() { 
          $(this).css({height: 'auto'}); 
         }); 
         // This is the sort of thing I'm trying to achieve 
         // is it out of scope? Not sure of the correct way 
         // to achieve this. 
         e.click(function() { return false; }); 
        }); 
        $(this).dequeue(); 
       }); 

      } else { 

       $('#pageEntry').animate({height: 0}, 600, function() { 

        $(this).remove(); 

        $('#page').queue(function() { 
         $(this).animate({height: '120px'}, 300); 
         $(this).html($loader); 
         $(this).animate({backgroundColor: '#fff'}, 300); 
         $(this).dequeue();      
        }); 

        $('#page').queue(function() { 
         $('#page').load($href + ' #pageEntry', function() { 
          var $height = $('#pageEntry').height(); 
          var $h = $height + 16; 
          $(this).animate({height: $h + 'px'}, 600, function() { 
           $(this).css({height: 'auto'}); 
          }); 
         }); 
         $(this).dequeue(); 
        }); 

       }); 
      } 

     }); 

    }); 
}); 

不要太擔心else語句現在,請參閱評論線,我做對了嗎?超出範圍?以前肯定有人遇到過這個問題。

任何幫助將不勝感激。

p.s我知道很多代碼都可以縮小,我會稍後再做。

回答

0

您可以使用one()函數來確保事件處理程序只運行一次。或者,您可以使用data()將布爾值綁定到元素,指示元素當前是否「活動」(即顯示其內容)。作爲參考,這兩個函數都是JQuery函數。

0

有很多方法可以做到這一點,例如使用one更好。但是,您現有的代碼似乎有一個問題:e是一個事件參數,而不是被單擊的元素。你可以做這樣的事情:

$(function() { 
    $('#navigation ul > li a').each(function() { 

     $(this).click(function(e) { 

      $.ajaxSetup ({ 
       cache: false 
      }); 

      e.preventDefault(); 

      var $href = $(this).attr('href'), $thelink = $(this); 

      var $loader = '<div id="whiteLoader" />'; 

      if($('#page').length == 0) { 

       $('<div id="page" />').insertAfter('#header'); 

       $('#page').queue(function() { 
        $(this).animate({height: '120px'}, 300); 
        $(this).html($loader); 
        $(this).animate({backgroundColor: '#fff'}, 300); 
        $(this).dequeue();      
       }); 

       $('#page').queue(function() { 
        $('#page').load($href + ' #pageEntry', function() { 
         var $height = $('#pageEntry').height(); 
         var $h = $height + 16; 
         $(this).animate({height: $h + 'px'}, 600, function() { 
          $(this).css({height: 'auto'}); 
         }); 
         $thelink.unbind(e); 
        }); 
        $(this).dequeue(); 
       }); 

      } else { 

       $('#pageEntry').animate({height: 0}, 600, function() { 

        $(this).remove(); 

        $('#page').queue(function() { 
         $(this).animate({height: '120px'}, 300); 
         $(this).html($loader); 
         $(this).animate({backgroundColor: '#fff'}, 300); 
         $(this).dequeue();      
        }); 

        $('#page').queue(function() { 
         $('#page').load($href + ' #pageEntry', function() { 
          var $height = $('#pageEntry').height(); 
          var $h = $height + 16; 
          $(this).animate({height: $h + 'px'}, 600, function() { 
           $(this).css({height: 'auto'}); 
          }); 
         }); 
         $(this).dequeue(); 
        }); 

       }); 
      } 

     }); 

    }); 
}); 
+0

解除綁定()是好的,但一旦被激活鏈接返回到正常狀態,而我總是希望點擊功能是preventDefault()方法 – daryl 2011-04-06 03:10:30