0

少し前にウェブサイトで見つけた小さなjqueryコードを使用して、コンテンツを切り替えています。デフォルトではコンテンツは閉じられており、特別なリンクをクリックするとコンテンツがスムーズなスライド アニメーションで開きます。ここまでは順調ですね。問題は、デフォルトで非表示になっているはずのコンテンツが、ページが読み込まれるまで表示され、jquery が読み込まれるとすぐに閉じられることです。Web サイトのコンテンツの読み込み時間を短縮するために、ページの最後に jquery を配置しました。私はこの動作が自然であることを知っていますが、jquery ビットが読み込まれる前であっても、開くことができるコンテンツが閉じられる前に、他のトグル スクリプトを見たことがあります。問題は、インターネット接続が遅い人には、ページの読み込みが完了するまでかなりの時間「非表示」の部分が表示されることです。デフォルトでは閉じているはずなので、パーツは閉じます。

jqueryが読み込まれる前でもパーツを閉じたままにするためにcssを試しましたが、cssがまだ閉じたままにしておくため、「もっと見る」リンクをクリックしても開くことができないという問題があります..指圧!!

私が使用するコードは次のとおりです。

<div class="morepara"> content that should be hidden by default can be opened by clicken on the image link below</div>

<p class="togglebutn">
<a>
<img src="/images/read-more.png" class="img-swap" aid="myImage"/>
</a>
</p>

<script type="text/javascript">
var $s = jQuery.noConflict();
$s('document').ready(function() {
    $s('.morepara div').hide();
    $s('.togglebutn a').click( function() {
        var parentpara = $s(this).parent().prev().children();
        parentpara.toggle('normal');
    });
});
$s(function() {
    $s(".img-swap").live('click', function() {
        if ($s(this).attr("class") == "img-swap") {
            this.src = this.src.replace("-more", "-less");
        } else {
            this.src = this.src.replace("-less", "-more");
        }
        $s(this).toggleClass("on");
    });
});
</script>

ああ、画像交換スクリプトはうまく機能します。その部分に問題はありません:)

前もって感謝します！:)

4

3 に答える 3

3

<div class="morepara">CSS でaをdisplay:none;指定すると、インターネット接続が遅い人でも、サイトを開いたときに div が表示されなくなります。

<div class="morepara" style="display:none;">

これは実際には次と同じです:$s('.morepara').hide();ページが完全にロードされたときにその 1 つだけが実行されます。

于 2012-07-11T11:44:19.440 に答える
1

CSSで非表示にすることができます：

.morepara {
    display:none;
}

...そしてjQueryで可視性を切り替えます

于 2012-07-11T11:45:21.417 に答える
0

ここにリンクがあります。.children を削除し、親を表示しないように設定します。

于 2012-07-11T11:45:46.037 に答える