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> 

등을 포함 시켰습니다

는

<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

가 하이퍼 링크의 기본 동작을 방지 해보십시오 HTML과 함께 자바 스크립트입니다 발생 일 :

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

       }); 
     }); 

이렇게하면 브라우저가 앵커 ' # '(동적으로로드 된 div의 <a href='#'') 즉, 앵커는 하이퍼 링크보다 버튼처럼 동작합니다.

해당 이벤트 핸들러의 끝에 return false;이 너무 트릭을 할해야 http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

이 또한주의를 참조하십시오.