1

オンラインで質問に対する単一の回答を見つけることができませんでした...

私は自分のポートフォリオ用の Web サイトのアイデアに取り組んでおり、jQuery を使ってよりエキサイティングなものにすることにしました。jQuery を適切にリンクして動作させていますが、.toggle メソッドを使用すると、ボタンの CSS が消えてしまうようです。

これまでの私のjQueryは次のとおりです。

$(document).ready(function(){
  $(".landingHideButton").click(function(){
    $(".copy-background").toggle(2000);
    $(".landingHideButton").html("Show Content");
  });
});

私のHTML構造は次のようになります。

<div id="landing">
    <div class="copy-background">
        <h4>Header</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo enim, euismod nec ultrices id, ultrices vitae nisl. Aenean pharetra congue tempor. Pellentesque nisi nisl, aliquam ut pulvinar sed, tristique pretium tortor. In commodo lobortis euismod. Aliquam nisl risus, rutrum sed facilisis id, ultrices a nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="landingHideButton">
        <p>Hide Content</p>
    </div>
</div>

そして、landingHideButton のタイポグラフィ css は次のとおりです。

.landingHideButton p {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
    font-weight: 500;
    color: #7d7d7d;
}

ボタンが押されると、copyBackgroundすべてのコピーを含む div は、jQuery 関数で設定した速度でオン/オフを切り替えることを意図しています。しかし、私が望んでいるのは、ボタン div 内のコピーを「コンテンツを非表示」から「コンテンツを表示」に変更して、ユーザーがもう一度押すと非表示のコンテンツを表示できるようにすることです。ボタンを押すと、font-size CSS とその div 内のコピーの配置がすべて削除されることを除いて、これは現在すべて機能します。

それを行わないようにする方法、またはこのタスクを達成するためのより良い/よりクリーンな方法があるかどうかを誰かが知っていますか? 覚えておいてください、私はこれにかなり慣れていないので、可能であれば答えを簡単にしてください. スクリプトの用語はある程度理解できますが、スクリプトに関するクラスは受講したことがなく、W3Schools.com で学んだことしか知りません...

視覚的な補助については、darerdesign.com で実際に動作しているのを参照してください...

4

3 に答える 3

0

適切な要素 ( .landingHideButton p) にテキストを設定し、トグルでコールバックを使用して、アニメーションが完了した後に設定します。

フィドル

 $(".copy-background").toggle({
     duration: 2000,
     complete: function () {
         $(".landingHideButton p").text("Show Content");
     }
 });

PSあなたはCSSでそれを正しく持っていたので、単純な間違いだと思います

または、非表示と表示が実際には両方あるが、非表示のペアで一度に 1 つしか表示されないこのオプション。コピーが切り替えられるのと同じ期間、ボタンのテキストをゆっくりと切り替えます

フィドル 2

<div class="landingHideButton">
    <p class="hide">Hide Content</p>
    <p class="show">Show Content</p>
</div>

$(".landingHideButton").click(function () {
    var dur = 2000;
    $(".copy-background").toggle(dur);
    $(this).find('.hide,.show').slideToggle( dur);
});
于 2013-05-16T02:58:25.130 に答える
0

.landingHideButtondivの HTML をタグにないテキストに置き換えているため、P CSS は適用されません!

次のような行を使用してみてください。

$(".landingHideButton").html("<p>Show Content</p>");

編集：

または、おそらくさらに明確です。

$(".landingHideButton p").html("Show Content");
于 2013-05-16T02:50:11.787 に答える
0

これを試してください: http://jsfiddle.net/utBg3/ またはもっと良い http://jsfiddle.net/K4Lge/

また、トグル機能を使用して、open div と close div に従ってコンテンツを変更することもできます

それが役に立てば幸い、

コード

$(document).ready(function(){
  $(".landingHideButton").click(function(){
    $(".copy-background").toggle(2000);
    $(".landingHideButton > p").html("Show Content");
  });
});

その他のオプション

$(document).ready(function () {
    $(".landingHideButton").click(function () {
        $(".copy-background").toggle(2000, function () {

            $(this).is(':visible') ? $(".landingHideButton > p").html("Hide Content") : $(".landingHideButton > p").html("Show Content");


        });

    });
});
于 2013-05-16T02:54:32.990 に答える