如何防止窗口滚动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;在该事件处理程序的结束应该做的伎俩。