如何防止在jQuery slideToggle()中窗口滚动向上？

Question

我正在使用jQuery在页面加载时动态添加两个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>

- MunkiPhD

Answer 1

尝试防止您的超链接发生默认操作：

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

                });
        });

这将防止浏览器在动态加载的div中看到锚点'#'时跳转。换句话说，该锚点会更像按钮而不是超链接。

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

还要注意，在事件处理程序的末尾加上return false;也可以达到同样的效果。

- karim79

---

不知道我怎么会错过那个。谢谢，感谢你的帮助。 - MunkiPhD

或者更好的做法是，不要使用a标签来收集点击事件。您，先生，是一位绅士和学者。 - Neil