在jQuery

时间：2017-10-26 05:03:42

标签： javascript jquery html

检查下面的代码。我的代码目前工作正常，但当我点击“更多”按钮时，它会消耗所有行，一旦我点击“减少”，它就会折叠所有行。我的目标是：默认情况下，当我单击更多时，它只显示前6行，它将加载重置所有可用行。然后，当我单击“减少”时，它将仅折叠6行所消耗的行，就像默认位置一样。如果行少于6，则此按钮将不执行任何操作。如果可能的话，我想要慢速下拉而不是慢速隐藏/显示。

我怎样才能做到这一点？

$(".table").children("tbody").hide();
$("#expendbtn").html("More");
     
$("#expendbtn").click(function(){        
  if ($("#expendbtn").text()=="More") {
    $(".table").children("tbody").show("slow");
    $("#expendbtn").html("Less");
  } else {        
    $(".table").children("tbody").hide("slow");
    $("#expendbtn").html("More");
  }        
});
    <!DOCTYPE html>
    <html>
    <head>
        <title>test</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    </head>
    <body>
    
    <div class="container">
        <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
            <table class="table table-striped jambo_table">
                <thead>
                    <tr class="headings">
                        <th><h4>Main Cat</h4></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
                    <tr>
                        <td>Sub cat</td>
                    </tr>
            </tbody>
        </table>
        <button type="button" class="btn btn-info" id="expendbtn"></button>
    </div>
    </div>
    </div>

    </body>
    </html>

3 个答案:

答案 0 :(得分：0)

您可以使用解决方案https://jsfiddle.net/v5pvxujp/1/ 

$("#expendbtn")
  .html("More")
  .click(function(){
    if ($("#expendbtn").text()=="More") {
      $('table tr:nth-child(n+7)').fadeIn('slow');
      $("#expendbtn").html("Less");
    } else {
	  $('table tr:nth-child(n+7)').fadeOut('slow');
	  $("#expendbtn").html("More");
    }
  });
.hideRow {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th><h4>Main Cat</h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr class="hideRow">
                    <td>Sub cat</td>
                </tr>
                <tr class="hideRow">
                    <td>Sub cat</td>
                </tr>
                <tr class="hideRow">
                    <td>Sub cat</td>
                </tr>
                <tr class="hideRow">
                    <td>Sub cat</td>
                </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>

希望这会对你有所帮助。

答案 1 :(得分：0)

这对你有用。

你内部的一个简单的调整script，我已经改变了这个↓

$(".table").children("tbody").hide();

到这个↓

$(".table").find("tr").hide().slice(0, 7).show();

适合你的小提琴。 ↓ 

$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");

$("#expendbtn").click(function() {

  if ($("#expendbtn").text() == "More") {
    $(".table").find("tr").show();
    $("#expendbtn").html("Less");
  } else {

    $(".table").find("tr").hide().slice(0, 7).show();
    $("#expendbtn").html("More");
  }

});
<!DOCTYPE html>
<html>

<head>
  <title>test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
          <thead>
            <tr class="headings">
              <th>
                <h4>Main Cat</h4>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
          </tbody>
        </table>
        <button type="button" class="btn btn-info" id="expendbtn"></button>
      </div>
    </div>
  </div>

</body>

</html>

过渡时更新了2 

$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");

$("#expendbtn").click(function() {

  if ($("#expendbtn").text() == "More") {
    $(".table").find("tr").removeClass('slideUp');
    $("#expendbtn").html("Less");
  } else {

    $(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
    $("#expendbtn").html("More");
  }

});
.table tbody{
}

.table tr{
 transition: all ease-in-out 0.4s;
 overflow:hidden;
 max-height:100px;
}

.table tr.slideUp{
  transform: scaleY(0);
  display:block;
  max-height:0px;
}
<!DOCTYPE html>
<html>

<head>
  <title>test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
          <thead>
            <tr class="headings">
              <th>
                <h4>Main Cat</h4>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
            <tr>
              <td>Sub cat</td>
            </tr>
          </tbody>
        </table>
        <button type="button" class="btn btn-info" id="expendbtn"></button>
      </div>
    </div>
  </div>

</body>

</html>

答案 2 :(得分：0)

一个工作的，更短且可消耗的例子：

＆＃13;
＆＃13; 
  /**
    * Hide every row from +irow+
    * If +animateIt+ is true, animate the dropdown
    *
    */
  function hideRowsStartingAt(irow, animateIt)
  {
    $(".table tbody").children("tr:nth-child(n+"+irow+")").hide(animateIt ? 'slow' : null);
  }

  
  // Set up

  hideRowsStartingAt(7);
  $("#expendbtn").html("More");

  // Wait (for click) and see

  $("#expendbtn").click(function(){
    
    // Collapse or expend ?
    var doExpend = $("#expendbtn").text() == "More" ;

    if ( doExpend ) 
    {
      $(".table tbody").children("tr").show('slow');
    }
    else // doCollapse
    {
      hideRowsStartingAt(7, true);
    }

    // Button name is now…

    $("#expendbtn").html(doExpend ? 'Less' : 'More') ;

  });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th><h4>Main Cat</h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题