Question

请参阅下面的代码，如果单击子标题行，则会隐藏行。它运作良好。

在第二个子标题行（<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>

Answer 1

我使用您提供的信息创建了jsFiddle example。

我使用默认的arrow - 类编辑了一些代码，只是添加了类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();
        }
    });
});

要使“默认隐藏”元素在页面加载时关闭，我所做的就是在绑定click-Handler之后触发上的点击事件。

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

查看工具示例的小提琴

Answer 2

创建一个命名函数并调用它几次：

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); });

Answer 3

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

Like this

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

如何避免重复代码（页面加载时切换）？

3 个答案: