1

以下のコードを参照してください。サブタイトルの行をクリックすると、その行が非表示になります。それはうまくいきます。

2番目のサブタイトル行（<tr class="sub-title default-hide">）-ページが読み込まれたときにデフォルトでこれを切り替え/非表示にします。以下のような重複コードを記述せずにこれを行うにはどうすればよいですか？

   $(".sub-title").on("click",function() {
        tr = $(this).find('span').hasClass("arrow2");
        trSpan = $(this).find('span');
        $(this).nextUntil(".sub-title").each(function() {
            if (!$(this).hasClass('head-order')) {
                $(this).toggle();
                if (tr) {
                    trSpan.removeClass('arrow2').addClass('arrow1');
                } else {
                    trSpan.removeClass('arrow1').addClass('arrow2');
                }
            }
        });
    });

HTML

<table border="1">
 <tbody>
  <tr class="head">
   <td> title </td>
  </tr>
  <tr class="sub-title">
     <td>Sub Title 1 <span class="arrow2"> </span></td>
  </tr>
   <tr> <td>Item 1</td> </tr>
   <tr> <td>Item 2</td> </tr>
   <tr> <td>Item 3</td> </tr>
   <tr class="sub-title default-hide">
     <td>Sub Title 2 <span class="arrow2"></span></td>
   </tr>
   <tr> <td>Item 4</td> </tr>
   <tr> <td>Item 5</td> </tr>
   <tr> <td>Item 6</td> </tr>
  </tbody>
</table>
4

3 に答える 3

1

名前付き関数を作成し、それを数回呼び出します。

var toggleArrow = function(el) {
    tr = $(el).find('span').hasClass("arrow2");
    trSpan = $(el).find('span');
    $(el).nextUntil(".sub-title").each(function() {
        if (!$(el).hasClass('head-order')) {
            $(el).toggle();
            if (tr) {
                trSpan.removeClass('arrow2').addClass('arrow1');
            } else {
                trSpan.removeClass('arrow1').addClass('arrow2');
            }
        }
    });
};

$(".sub-title").on("click", function(){ toggleArrow(this); });
$(".default-hide").each(function(i, el){ toggleArrow(this); });
于 2012-08-09T00:20:51.300 に答える
1

ご提供いただいた情報を使用してjsFiddleの例を作成しました。

arrowデフォルトの-classを使用してコードを少し編集し、それにクラスcloseを追加して、新しいスタイルを定義しました。これにより、コードが少し短くなります。

$(".sub-title").on("click",function() {
    var trSpan = $(this).find('span');

    trSpan.toggleClass('closed');

    $(this).nextUntil(".sub-title").each(function() {
        if (!$(this).hasClass('head-order')) {
            $(this).toggle();
        }
    });
});

「default-hidden」要素をページロード時に閉じるには、クリックハンドラーをバインドした後にクリックイベントをトリガーするだけです。

$('.default-hide').trigger('click');

実用的な例については、フィドルを参照してください

于 2012-08-09T00:18:42.613 に答える
0

default-hide行に対して手動でクリックイベントをトリガーできます。

このような

$('.default-hide').trigger('click');
于 2012-08-09T00:19:18.277 に答える