2

アコーディオンは、div の代わりにリスト ul と li を使用して構築されます。この問題を抱えているほとんどの人がそうであるように、アコーディオンの一部のセクション内のコンテンツは非常に長く、大きなヘッダーの 1 つをトリガーすると、ユーザーは下にスクロールしてすべてのコンテンツを表示します。その下には、クリックする別の 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 に答える