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