响应式表设计：使用JQuery使click（）展开tr

I want the tables on my webpage to behave responsively. The idea is for them to automatically be represented as accordions as soon as the page width is below a certain threshold. I pulled the example code for the accordion from this page.

我希望我的网页上的表格能够响应。一旦页面宽度低于某个阈值,他们就会自动将其表示为手风琴。我从这个页面中提取了手风琴的示例代码。

My problem now is that the entire table row is turned into a button which triggers the respective folding/unfolding. How can I rewire the js in order to make the <i> element responsible for receiving the click-event instead of the <tr> element?

我现在的问题是整个表格行变成一个按钮,触发相应的折叠/展开。为了使元素负责接收click事件而不是元素,我如何重新连接js?

The reason for which I want this behavior is quite simple: My table contains several input elements which this point cannot be used anymore as the table would fold back as soon as any of these inputs is clicked.

我想要这种行为的原因很简单:我的表包含几个输入元素,这一点不能再使用,因为只要点击任何这些输入,表就会折回。

This is my attempt. However, it fold/unfolds every row instead of only the one clicked by the user:

这是我的尝试。但是,它会折叠/展开每一行而不是只有用户点击的一行:

trAcc.find('i').click(function () {
    if (trAcc.hasClass('accordion-opened')) {
        trAcc
          .animate({ maxHeight: '50px' }, 200)
          .removeClass('accordion-opened');

        $(this).text('+');

    } else {
        trAcc
          .animate({ maxHeight: '1000px' }, 400)
          .addClass('accordion-opened');

        $(this).text('-');
    }
});

Here is the original fiddle.

这是最初的小提琴。

2 个解决方案

#1

As I am new to jQuery I currently do not know much about the API. However, I just stumbled upon the parent method. Using it the problem gets quite easy and my solution boils down to this:

由于我是jQuery的新手,我目前对API知之甚少。但是,我只是偶然发现了父方法。使用它,问题变得非常简单,我的解决方案归结为:

trAcc.find('i').click(function () {
    if ($(this).parent('tr').hasClass('accordion-opened')) {
        $(this).parent('tr')
          .animate({ maxHeight: '50px' }, 200)
          .removeClass('accordion-opened');

        $(this).text('+');

    } else {
        $(this).parent('tr')
          .animate({ maxHeight: '1000px' }, 400)
          .addClass('accordion-opened');

        $(this).text('-');
    }
});

#2

I modified your original jsFiddle code a little like this.

我修改了你原来的jsFiddle代码。

trAcc.append('<i class="icon-accordion">+</i>');
    $('.icon-accordion').on('click', function (e) {
        e.stopImmediatePropagation();
        if ($(this).parent().hasClass('accordion-opened')) {
            $(this)
                .parent()
                .animate({maxHeight: '60px'}, 200)
                .removeClass('accordion-opened')
                .end()
                .text('+');
        } else {
            $(this)
                .parent()
                .animate({maxHeight: '1000px'}, 400)
                .addClass('accordion-opened')
                .end()
                .text('-');
               }
       });

#1