如何防止窗口滾動jQuery slideToggle（）？

Question

我使用jQuery在頁面加載時動態添加兩個div。這一切都很好，除了，當我點擊第一個動態加載的div中的「高級選項」鏈接 - 它執行正確的行爲（滑動第二個動態div），但它重置窗口的滾動回到頂部。我試圖專注於我滑開的div的第一個輸入元素，但無濟於事。

我該如何擺脫這種不需要的滾動行爲？

我已經包括了代碼，以幫助（如長篇大論，因爲它是）

<style type="text/css"> 
.itemcontainer { 
    background-color:#FFFFCC; 
    border:1px solid #999999; 
    height:auto; 
    margin:1em 0; 
    overflow:hidden; 
    position:relative; 
    width:600px; 
    } 
.itemcontainer .optionpopoutcontainer { 
    background-color:#44CC55; 
    bottom:0; 
    color:#333333; 
    height:auto; 
    left:0; 
    padding:6px; 
    position:absolute; 
    width:100%; 
} 
.itemcontainer .advancedpopoutcontainer {} 
</style> 

這裏是一個與HTML一起的JavaScript

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var counter = 0; 
     //Add the necessary divs to the classes 
     $(".itemcontainer").each(function(){ 
      var id = $(this).find("input[name='ItemID']").attr('value'); 
      $(this).append("<div class='optionpopoutcontainer' id='quickaddcontainer-" + id + "'></div><div class='advancedpopoutcontainer' id='advancedaddcontainer-" + id + "'></div>"); 
     }); 


      $(".optionpopoutcontainer").css("display", "none"); //used for the sliding up 
     $(".optionpopoutcontainer").each(function(){ 
      createQuickAddForm($(this), GetID($(this))); 
     }); 
     $(".advancedpopoutcontainer").css("display", "none"); //used for the sliding up 
     $(".advancedpopoutcontainer").each(function(){ 
      AddAdvancedOptionsForm($(this), GetID($(this))); 
     }); 


     $(".cancelButton").click(function(){ 
      var parent = GetParentDiv($(this)); 
      parent.slideToggle(); 
     }); 


     $(".opencontainer").click(function(){ 
      GetParentDiv($(this)).find("div.optionpopoutcontainer").slideToggle(250); 
     }); 

     $(".quickaddadvoptions").click(function(){ 
      var container = GetParentDiv($(this)); 
      $(container).slideToggle(function(){ 
       var innerContainer = GetParentDiv(container).find("div.advancedpopoutcontainer").slideToggle(250); 

      }); 
     }); 

     function GetParentDiv(item){ 
      return item.parents('div:eq(0)'); 
     } 

     function GetID(item){ 
      return item.attr('id').split('-')[1]; 
     } 


     $("input[name='Date']").each(function(){ 
      $(this).datepicker({dateFormat: 'd MM, y'}); 
     }); 
    }); 



    function createQuickAddForm(item, itemID){ 
      var str = "<form method='post' action='#' id='addform-" + itemID + "'>"; 
      str += "Size: <input id='Size' type='text' value='1' name='Size'/> "; 
      str += "<input id='ItemID' type='hidden' value='29' name='ItemID'/>"; 
      str += "<input type='submit' value='Log Item'/>"; 
      str += "<a href='#'' class='quickaddadvoptions' id='advancedoptions-" + itemID + "'>Advanced Options</a>"; 
      str += "</form>"; 
      str += "<button class='cancelButton'>Cancel</button>"; 

      item.html(str); 
     }; 


    function AddAdvancedOptionsForm(containerDiv, itemID){ 
      var str = "<form method='post' action='#' id='addformadv-" + itemID + "'>"; 
      str += "Size: <input id='Size-" + itemID + "' type='text' value='1' name='Size'/><br/>"; 
      str += "Date: <input id='Date-" + itemID + "' type='text' value='" + GetTodaysDate() + "' name='Date'/><br/>"; 
      str += "Note: <input type='textarea' id='Note-" + itemID + "' name='Note' cols='20' name='Note'/><br/>"; 
      str += "<input id='ItemID-" + itemID + "' type='hidden' value='29' name='ItemID'/>"; 
      str += "<input type='submit' value='Log Item'/>"; 
      str += "</form>"; 
      str += "<button class='cancelButton' >Cancel</button>"; 

      containerDiv.html(str); 
     }; 
<div class="itemcontainer" name="item1"> 
<!-- <table> code --> 
<button style="float:right" class="opencontainer">slide it</button> 
<!-- other <table> code --> 
      <input type="hidden" value="2" name="ItemID"/> 
</div> 

Answer 1

儘量防止超鏈接的默認操作從發生：

$(".quickaddadvoptions").click(function(e){ 
       e.preventDefault(); 
       var container = GetParentDiv($(this)); 
       $(container).slideToggle(function(){ 
         var innerContainer = GetParentDiv(container).find("div.advancedpopoutcontainer").slideToggle(250); 

       }); 
     }); 

這將防止瀏覽器在看到錨' ＃'<a href='#''你動態加載的div。換句話說，錨點的行爲更像一個按鈕而不是超鏈接。

見http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

還要注意，一個return false;在該事件處理程序的結束應該做的伎倆。