jQuery手風琴幫助

Question

我遇到了這個我已經嘗試添加的代碼，但是我擔心我已經搞亂了它。我對Jquery或網頁設計不是非常有經驗，我需要幫助找到我做錯了什麼，以及如何才能更高效。

是否有更好/更有效的方式來編寫此代碼？

它有一些錯誤...

• 顯示負載時的所有div。我希望它只顯示一個我可以選擇的。
  
• 當它動畫時，文字跳動出於某種原因。
  
• 有時divs會動起來，但不會下降。

這裏是什麼樣子，現在的鏈接：http://dl.dropbox.com/u/14080718/Final/NeedHelp.html

<script> 
    $(document).ready(function() { 
     // the currently loaded section 
     var curLoaded = 'about'; 

     // navigation trigger 
     $('#navbar a').each(function() { 
      var $this = $(this) 
      var target = $this.attr('href').split('#')[1]; 
      var $contentContainer = $('#contentContainer'); 
      var oldPos = 0; 
      var newPos = 200; 

      // add a click handler to each A tag 
      $this.click(function(){ 
       // if the container isn't open, then open it 
       if ($contentContainer.css('height') == '') { 
        // trigger the animation 
        $contentContainer.animate({ 
         height: newPos 
        },"slow", function(){ 
         // fade in the content 
         $('#' + target).fadeIn(); 
        }); 
       } else { 
        if (curLoaded == target) { 
         $contentContainer.animate({ 
          height: oldPos 
         },"slow", function(){ 
          $('#content div').hide(); 
         }); 
        } else { 
         $contentContainer.animate({ 
          height: oldPos 
         },"slow", function(){ 
          $('#content div').hide(); 
          $contentContainer.animate({ 
           height: newPos 
          },"slow", function(){ 
           $('#' + target).fadeIn(); 
          }); 
         }); 
        } 
       } 
       curLoaded = target; 

       return false; 
      }); 
     }); 
    }); 
    </script> 

Answer 1

我已經採取了看看你的網頁，並採取了快速的刺，以解決一些越野車的行爲。

首先，看起來您正在處理用戶第二次點擊導航鏈接的情況，方法是關閉content div，但如果用戶第三次單擊導航鏈接，則無法處理。作爲一個用戶，我希望無論點擊鏈接多少次，div都會打開或關閉。

爲了解決這個問題，我已經添加了一個檢查目標元素是否可見，我用它來決定是否滑動打開或關閉的內容。我還添加了對顯示的調用並隱藏目標和curloaded元素的函數，以確保檢查元素是否可見將提供預期結果。

我修改後的代碼如下。爲了簡化代碼，可能會合並某些案例的邏輯。

// navigation trigger 
$('#navbar a').each(function() { 
    var $this = $(this); 
    var target = $this.attr('href').split('#')[1]; 
    var $contentContainer = $('#contentContainer'); 
    var oldPos = 0; 
    var newPos = 200; 

    // add a click handler to each A tag 
    $this.click(function() { 
     // if the container isn't open, then open it 
     if ($contentContainer.css('height') === '') { 
      // trigger the animation 
      $contentContainer.animate({ 
        height: newPos 
       }, "slow", function() { 
        // fade in the content 
        $('#' + target).show().fadeIn(); 
       }); 
     } else { 
      if (curLoaded == target) { 
       if ($('#' + target).is(':visible')) { 
        $contentContainer.animate({ 
          height: oldPos 
         }, "slow", function() { 
          $('#' + curLoaded).hide(); 
          $('#content div').hide(); 
         }); 
       } else { 
        $contentContainer.animate({ 
          height: newPos 
         }, "slow", function() { 
          // fade in the content 
          $('#' + target).show().fadeIn(); 
         }); 
       } 
      } else { 
       $contentContainer.animate({ 
         height: oldPos 
        }, "slow", function() { 
         $('#' + curLoaded).hide(); 
         $('#content div').hide(); 
         $contentContainer.animate({ 
           height: newPos 
          }, "slow", function() { 
           $('#' + target).fadeIn(); 
          }); 
        }); 
      } 
     } 

     curLoaded = target; 

     return false; 
    }); 

}); 

Answer 2

在此拉琴的CSS將與所有的div初步顯示出了幫助。你能否更詳細地解釋了其他2個錯誤（我似乎沒有注意到它們）

Fiddler Code