2

手风琴是使用列表 ul 和 li 而不是 div 构建的。像大多数遇到这个问题的人一样，手风琴的某些部分中的内容很长，当我触发其中一个大标题时，用户然后向下滚动以查看所有内容；在其下方是另一个要单击的 li 标题，手风琴关闭并打开最后一个标题。由于该部分中的内容也很大，用户只能盯着最后一个标题部分的底部，并且必须再次向上滚动。

在研究这个问题时，许多人建议使用 animate() 函数将注意力重新集中在手风琴的顶部。我的问题是因为我使用了开源代码，所以我不愿意对其进行过多的编辑，我已经尝试过，但到目前为止还没有成功。

任何人都可以帮忙吗？[这里是jquery]

  (function(jQuery){
     jQuery.fn.extend({  
         accordion: function() {       
            return this.each(function() {

                var $ul = $(this);

                if($ul.data('accordiated'))
                    return false;

                $.each($ul.find('ul, li>div'), function(){
                    $(this).data('accordiated', true);
                    $(this).hide();
                });

                $.each($ul.find('a'), function(){
                    $(this).click(function(e){
                        activate(this);
                        return void(0);
                    });
                });

                var active = (location.hash)?$(this).find('a[href=' + location.hash + ']')[0]:'';

                if(active){
                    activate(active, 'toggle');
                    $(active).parents().show();
                }

                function activate(el,effect){
                    $(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('slow');
                    $(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
                }

            });
        } 
    });  
})(jQuery);

谢谢 ：）

[编辑]

我意识到您可能需要从我的 html 触发手风琴的代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('ul').accordion();

    });
</script>

随着更多的研究，有些人建议使用 scrollTo() ，所以我也尝试了这个::

        <script type="text/javascript">
        $(document).ready(function () {
            $('ul').accordion({
    change: function() {
        document.scrollTo(0, 0);
    }
});
        });
    </script>

但这也不起作用。“叹息” .. 有谁知道我是否走在正确的轨道上？谢谢 ：）

4

1 回答 1

1

我解决了这个问题：

这有点作弊，但这就是我所做的。

为我要单击的每个 href 链接添加了一个滚动类class="scroll"

将此脚本添加到页面（我将我的脚本放在名为#acc 的 div 下）

<script>$(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$("#acc").offset().top}, 500);
    });
});</script>

我与原来的唯一不同的是#acc。那是我围绕手风琴 ul 类的 div 的名称。

这是我获得滚动代码的地方http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links

我希望这可以帮助其他寻找这个问题的人。^.^

于 2012-10-07T03:24:20.200 回答