Question

手风琴使用列表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（），所以我尝试了这个aswell ::

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

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

Answer 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

的代码的地方

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

jquery手风琴 - 滚动到li标题

1 个答案: