1

请参阅下面的代码，如果您单击副标题行，它将隐藏带有它的行。它运作良好。

在第二个副标题行 ( <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

我使用您提供的信息创建了一个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-hide').trigger('click');

请参阅小提琴以获取工作示例

于 2012-08-09T00:18:42.613 回答
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 回答
0

您可以手动触发default-hide行的单击事件。

像这样

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