1

基本的には「もっと見る」タイプのものを作っています。私が取り組んできたことを説明する小さな段落と、段落の最後にあるボタンがあります。I (実際にはボタン スタイルのリンクです)。ボタンが押されると、div が 400px に拡張され、余分なテキストが .html(); で追加されます。しかし、「ビューを減らす」ボタンを押して小さな段落と 200px の div に戻ると、何も起こりません。

jQuery

$(document).ready(function(){
var $mottheight = $('#row-mott').height();

if ( $mottheight == 300 ) {
    $('#mott-btn-collapse').click(function(){
    $('#row-mott').animate({
        height:200
    }, 300);
    $('#mott').html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn" class="btn btn-mini">Less info &raquo</a>');

});
}
else if ( $mottheight < 300 ){
    $('#mott-btn').click(function(){
    $('#row-mott').animate({
        height:300
    }, 400);
    $('#mott').html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>');
    });
}
else {
    return 0;
}
});
4

4 に答える 4

4

あなたの関数は非常にぎこちなくコーディングされています。ページの読み込み時だけでなく、関数内で高さをキャプチャする必要があり、すべてのクリック項目を組み合わせることができます。

var $row_mott = $('#row-mott'),
    $mott = $('#mott');

$('#mott-btn-collapse').click(function(){
    var $mottheight = $row_mott.height();

    if ($mottheight == 300) {
        $row_mott.stop().animate({height:200}, 300);
        $mott.html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn" class="btn btn-mini">Less info &raquo</a>');
    } else if ($mottheight < 300){
        $row_mott.stop().animate({height:300}, 400);
        $mott.html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>');
    }
});

ノート：

  • セレクターをキャッシュされた変数に変換しました。セレクターを複数回使用する場合の良い習慣
  • .stop()過剰なキューイングを防ぐために、アニメーションの前に追加しました
  • アクションを 1 つのボタンに統合しました。これはより個人的な好みですが、より一貫したユーザー エクスペリエンスのために、単一の「展開/折りたたみ」ボタンを使用することはかなり標準化されています。
于 2013-04-25T17:33:44.707 に答える
0

私はそれを考え出した。それは非常にシンプルで、なぜ今まで思いつかなかったのか正直わかりません。

 $(document).ready(function(){

   $('#mott-appended').hide();
   $('#patrick-appended').hide();

   /* Start Warren Mott High School text show/hide */

   $('#mott-btn').click(function(){
    $('#mott-appended').show('slow');
    $(this).hide('slow');
   });

   $('#mott-btn-collapse').click(function(){
    $('#mott-appended').hide('slow');
    $('#mott-btn').show('slow');
   });

   /* End Warren Mott High School text show/hide */
   /* Start Patrick Studios text show/hide */

    $('#patrick-btn').click(function(){
       $('#patrick-appended').show('slow');
       $(this).hide('slow');
    });

    $('#patrick-btn-collapse').click(function(){
       $('#patrick-appended').hide('slow');
       $('#patrick-btn').show('slow');
   });

   /* End Patrick Studios text show/hide */

});
于 2013-04-27T22:27:10.353 に答える
0

クリック ハンドラーを 1 回だけ実行しています。したがって、ドキュメントの読み込み時に #row-mott の高さを見つけて設定し、持っているものを評価します。デフォルトでは、< 300 です。前ではなく、クリック イベント内の高さを確認する必要があります。

于 2013-04-25T17:35:46.230 に答える