Question

我试图找出如何在该行之前滑动当前被blah blah文本占据的行，这将显示更多信息。关于我做错了什么的想法，因为现在当我点击它时没什么好看的？

我没有收到任何javascript错误。

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:5px;">
                <a id="orderData" class="btn btn-xs"><i class="fa fa-plus-circle fa-2x"></i></a>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="8"><p>Blah blah blah blah blah blah blah blah blah blah blah
                    blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                    blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
            </td>
        </tr>                        
    </tbody>
</table>

$(function() {
    $("td[colspan=8]").parent().hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
            $target.closest("tr").prev().find("td:first").html("+");
        } else {
            $target.closest("tr").next().find("p").slideToggle();
            if ($target.closest("tr").find("td:first").html() == "+")
                $target.closest("tr").find("td:first").html("-");
            else
                $target.closest("tr").find("td:first").html("+");
        }
    });
});

Answer 1

试试这个：

＆＃13;

$(function() {
    $(".info-toggler").on('click', function(event) {
        $(this).parents("tr").next().toggleClass("hide");
        $(this).children("i").toggleClass("fa-minus-circle").toggleClass("fa-plus-circle");
    });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<table class="table table-bordered table-hover">
  <thead>
<tr>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th>Action</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td style="width:5px;">
    <a class="btn btn-xs info-toggler"><i class="fa fa-plus-circle fa-2x"></i></a>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="info-row hide">
  <td></td>
  <td colspan="10">
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </td>
</tr>

<tr>
  <td style="width:5px;">
    <a class="btn btn-xs info-toggler"><i class="fa fa-plus-circle fa-2x"></i></a>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="hide">
  <td></td>
  <td colspan="10">
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </td>
</tr>
  </tbody>
</table> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

＆＃13;

在另一个下面滑下一排

1 个答案: