-1

私は次のコードを手に入れました：

<script type="text/javascript">
    jQuery(document).ready(function(){
    var Opened = false;
    jQuery('.expend-schedule').click(function(e){
        // On empêche l'action
        e.preventDefault();

        // Variable
        var DataType = jQuery(this).attr('data-type');

        // On va fermer toutes les tables
        jQuery('.schedule').each(function(){
            // On va fermer uniquement si ouverte
            if( jQuery(this).css('display') != 'none' && jQuery(this).attr('data-type') != DataType ){
                // On ferme
                jQuery(this).fadeOut( 500, function(){
                    // Est-ce que l'animation et l'ouverture s'est produite déjà ?
                    if(Opened === false){
                        var TableElement = jQuery('.schedule[data-type="'+DataType+'"]');
                        // On ouvre et on s'y déplace de façon automatique
                        TableElement.fadeIn(TableElement.height() * 0.47, function(){
                            jQuery('html, body').animate({  
                                scrollTop: TableElement.offset().top - 50
                            }, 'slow');
                        });

                        // On dit que c'est ouvert, afin d'empêcher l'ouverture à de multiples reprises
                        // si'il y a eu un bug
                        Opened = true;
                    }
                });
            }
        });

        // On reset
        Opened = false;
    });
</script>

これは私のページの例です：

<h4 class="sep_bg"><a class="expend-schedule" data-type="week" href="#">Monday to Friday</a></h4>
<table class="schedule table table-condensed" data-type="week">
    <thead>
        <tr>
            <th style="width: 60px;">Hour</th>
            <th style="width: 710px;">Transit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>04h</td>
            <td>04h15, 04h27, 04h39, 04h59</td>
        </tr>
    </tbody>
</table>

<h4 class="sep_bg"><a class="expend-schedule" data-type="saturday" href="#">Saturday</a></h4>
<table class="schedule table table-condensed" data-type="saturday">
    <thead>
        <tr>
            <th style="width: 60px;">Hour</th>
            <th style="width: 710px;">Transit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>04h</td>
            <td>04h15, 04h27, 04h39, 04h59</td>
        </tr>
    </tbody>
</table>

だから私の問題は：

クラスがある場所をクリックするたびにexpend-schedule、これは現在のスクロール位置から要素位置に移動するはずです。これは機能していますが、クリックするとページの一番上に移動し、要素の位置に移動する点が異なります。

何か案は？ありがとう。

4

2 に答える 2

0

ブラウザは最初に<a href="#">リンクを尊重し、それをページの上部に移動してから、アニメーションを実行しているようです。

<a href="javascript:void(0);">Text</a>問題を解決するためにに変更します。

于 2012-06-20T15:05:00.620 に答える
0

私はそれが上に行くことはないと思います、私はあなたが提供したコードでそれをテストしようとしました（いくつかの括弧がありません）。とにかく、あなたのscrollTopはアニメーションの完全な機能にあるので、フェードアウトは物事が上に移動してから下に移動するという知覚を引き起こしていると思います。フェードを外すと、正しく機能しますが、私にとっては、次のクリックで何も起こらなかった場合にのみ機能しました。

したがって、フェードなしでテストし、それがまだ実行していると思うことを実行しているかどうかを確認します。

于 2012-06-20T15:23:07.503 に答える