发表新帖
发表新帖

jQuery Examples – Horizontal Accordion - Table instead of Un-ordered Lists - UPDATED

后端 未结
关注
2 359
醉话见心
醉话见心 2020-12-17 07:38

Ok I got it working for anyone who needs this :)

[Original Statement/Question]
Here is and example of what I\'m trying to do (But on clic

相关标签:
2条回答
  • 悲哀的现实
    2020-12-17 07:47

    This probably is a silly idea - but if you're stuck with the html (that is you can't edit it), but you do have the ability to apply any javascript on the page - why not simply reading the data that the table contains to memory (that is convert it to some js data structure), then just remove the original table using javascript and then using it create any html that suits your needs.

    That probably will be simpler than table hacking.

    0 讨论(0)
  • 轮回少年
    2020-12-17 08:05

    Okay, I am completely re-editing this, because I looked more into your problem and saw that the white-space was an issue.

    Like I said before, use white-space: pre-wrap not pre to avoid distortion. There is an IE equivalent as well.

    First, here is an example demonstrating re-sizing the td elements and removing the style for others. It is hard-coded, but can be manipulated to fit your needs.

    http://ece.arizona.edu/~justinvh/test.html

    Here is the html:

    <!DOCTYPE HTML>
<html>
  <head>    
    <title>Testing Horizontal Accordion</title>
    <style>
      table {
        width: 100%;
      }

      th {
        display: table-cell !important;
      }

      td {
        border: 1px solid #A8A8A8;
      }

      div.content {
        max-height: 20px;
        overflow: hidden;
        white-space: pre-wrap;
      }
    </style>
    <script src="jquery-1.3.2.min.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th style="width: 70%;">A</th>
          <th>B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>                      
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>Hello, my baby!</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

    Here is the JavaScript:

    <script>
  var $active = $("thead > tr > th:first");
  var $active_td = $('div.content', 'table > tbody > tr > td:nth-child(1)');
  var min_width = $active.next().width();
  var max_width = $active.width();

  $("thead > tr > th").each(function(i, e) {
    (function(ith, element) {
      $(element).click(function() {
        $active_td.css('max-height', '20px');
        $active.animate({ width: min_width }, { queue: false, duration: 400 });
        $active_td = $('div.content', 'table > tbody > tr > td:nth-child(' + (ith + 1) + ')');
        $active_td.css('max-height', 'inherit');                        
        $(this).animate({ width: max_width }, { queue: false, duration: 400 });
        $active = $(this);
      });
    })(i, e);
  });

  $('thead > tr > th:first').click();
</script>

    So, some things to note. I use the nth-child selector to get the elements of the td that correspond to the th by looping over each th and applying a function that consumes the environment (to avoid references). This can obviously be done in multiple ways.

    You can apply this CSS using 'complete' callback on animate and do it that way.

    I purposely fully qualified the selectors so you can see how they should work. You can add identifiers/classes to whatever means is necessary.

    Let me know if this works for you.

    0 讨论(0)
 看不清?
提交回复
热议问题