1

私が設計しているページには、参照用に下部に固定位置バーがあります。これは、高さゼロのページ読み込みで始まりますが、その上に直接配置された div をクリックして拡大できます。同様に、個々の参照はコンテンツ ブロック内のリンクへのアンカーであり、ナビゲーション用に scrollTo および localScroll jQuery プラグインを使用しています。バーが縮小され、そこまでスクロールし、拡張アニメーションを呼び出します。このすべてを処理するスクリプトの最初の部分はうまく機能します - 参照バーは配置された div をクリックすると問題なく開きます - しかし、参照バーが閉じているか開いているかに関係なく、ページの読み込み後にクリックされた最初の固定リンクは 2 回クリックする必要があります。 1つではなく、何でもします。スクリプトは次のとおりです。

$(document).ready(function() {
    $("#reftag").css('bottom', '0px');
    $("#refblock").css('height','opx');
    $("refblock").scrollTo($("#refblock h4"),0);


    $("#reftag").click(
        function(){
            var offset = $("#refblock").offset();
            if(($(document).scrollTop()+$(window).height() - offset.top) > 100)
            {
                $("#reftag").animate({bottom: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").animate({height:"0px"},{queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").scrollTo($("#refblock h4"),0);
            }
            else
            {
                $("#reftag").animate({bottom: "200px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").animate({height:"200px"},{queue:false, duration: 1700, easing: 'easeOutBounce'})
            }
            return false;
        });

    $("a.ref").click(
        function () {           
            var offset = $("#refblock").offset();
            if(($(document).scrollTop()+$(window).height() - offset.top) > 100)
            {
                $('#textblock').localScroll({target:'#refblock'});
            }
        else{
            $('#textblock').localScroll({target:'#refblock',onAfter:function(){
                $("#reftag").animate({bottom: "200px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").animate({height:"200px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
            }});    
            }
                return false;
        });
    });

refblock の CSS は次のとおりです (任意の値の場合)。

#refblock{
    width: 100%;
    height: 0px;
    position: fixed;
    bottom: 0px;
    padding: 3px 20px 3px 0px;
    background: rgb(194,1,92);
    margin-left: 0%;
    margin-right: auto;
    text-align:center;
    z-index: 100;
    overflow: auto;
}

何か案は？スクリプトの問題か、それとも別の問題か。サイトが公開されたら、サイトへのリンクを投稿します。他に回答に役立つものがあればお知らせください。

4

1 に答える 1

0

a.refリンクのクリックによってトリガーされるデフォルトのアクションを防止するようにしてください:

$("a.ref").click(function (e) {
   e.preventDefault(); 
}
于 2012-07-14T17:09:53.413 に答える