2

誰かが助けてくれることを願っています! 私はjQuery/JSの初心者です。複数の機能を 1 つに凝縮する簡単な方法はありますか。jQueryを使用して、非表示のdivを展開および折りたたんでいます。以下のコードで問題なく動作しましたが、50 以上 (4 つだけでなく) になる可能性があり、最適化の名目でそれらを小さなコードのチャンクに凝縮する方法があると思います。どんな助けでも非常に感謝しています。これがJSです...

$('#toggle1').click(function() {
    $('.toggle').slideToggle('fast');
    return false;
    });

    $('#toggle2').click(function() {
    $('.toggle2').slideToggle('fast');
    return false;
    });
    $('#toggle3').click(function() {
    $('.toggle3').slideToggle('fast');
    return false;
    });

    $('#toggle4').click(function() {
    $('.toggle4').slideToggle('fast');
    return false;
    });

そしてここにHTMLがあります...

 <div class="docBlocA">
  <div class="docTitle" id="toggle1">Document Title Goes Here (click to expand)</div>
  <div class="toggle1" style="display:none; width:100%;">Hidden div content here</div>
 </div><!--docBlocA-->

 <div class="docBlocB">
  <div class="docTitle" id="toggle2">Document Title Goes Here (click to expand)</div>
  <div class="toggle2" style="display:none; width:100%;">Hidden div content here</div>
 </div><!--docBlocB-->

 <div class="docBlocA">
  <div class="docTitle" id="toggle3">Document Title Goes Here (click to expand)</div>
  <div class="toggle3" style="display:none; width:100%;">Hidden div content here</div>
 </div><!--docBlocA-->

 <div class="docBlocB">
  <div class="docTitle" id="toggle4">Document Title Goes Here (click to expand)</div>
  <div class="toggle4" style="display:none; width:100%;">Hidden div content here</div>
 B</div><!--docBlocB-->

よろしくお願いします...

4

3 に答える 3

5

クリックされた要素を参照するハンドラーのコンテキスト内で、クラスセレクターとnextメソッドを使用できます。this

$('div.docTitle').click(function(){
    $(this).next().slideToggle('fast');
});

注: DIV 要素にはデフォルトのアクションがないためreturn false、イベントの伝播を停止したい場合を除き、必要ありません。

于 2013-03-07T17:47:16.253 に答える
1

使用する

 $('.docTitle').click(function() {
    $(this).slideToggle('fast');
    });
于 2013-03-07T17:51:43.687 に答える
0 
$('#toggle1,#toggle2,#toggle3,#toggle4').click(function() {
    $('.toggle').slideToggle('fast');
    return false;
    });
于 2013-03-07T17:47:39.887 に答える