javascript - 用javascript中的按钮显示所有投资组合元素

Question

我正在建立一个投资组合网站。在投资组合元素中，我想默认显示 6 个元素，然后单击一个按钮(显示更多)以显示剩余的元素，其中按钮的文本应更改为(显示更少)。再次单击(显示较少)按钮时，元素应返回其原始状态。我能够按类别过滤器对每个元素进行排序，但显示所有元素是问题所在。检查下面我的代码片段。

// PORFOLIO CATEGORIES
$('.port_cat').on('click', function() {
  $('.port_cat').removeClass('active-port');
  $(this).addClass('active-port');
});

// PORTFOLIO FILTER
$(".port_cat").click(function() {
  var value = $(this).attr('data-filter');
  if (value == "all") {
    $('.filter').show('1000');
  } else {
    $(".filter").not('.' + value).hide('3000');
    $('.filter').filter('.' + value).show('3000');
  }
});

.project {
  position: relative;
  overflow: hidden;
}

.project .overlay {
  display: inline-block;
  text-align: center;
  position: absolute;
  z-index: 3;
  padding: 10% 8%;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  color: black;
  opacity: 0;
  background: rgba(60, 235, 226, 0.9);
  -webkit-transition: background 0.5s, opacity 0.5s 0.5s;
  -moz-transition: background 0.5s, opacity 0.5s 0.5s;
  -o-transition: background 0.5s, opacity 0.5s 0.5s;
  -ms-transition: background 0.5s, opacity 0.5s 0.5s;
  transition: background 0.5s, opacity 0.5s 0.5s;
}

.project .overlay:hover {
  opacity: 1;
  -webkit-transition: background 0.25s, opacity 0.25s 0s;
  -moz-transition: background 0.25s, opacity 0.25s 0s;
  -o-transition: background 0.25s, opacity 0.25s 0s;
  -ms-transition: background 0.25s, opacity 0.25s 0s;
  transition: background 0.25s, opacity 0.25s 0s;
  transition-delay: 0;
  -webkit-transition-delay: 0;
}

.project .overlay:hover .content {
  opacity: 1;
  opacity: 0.2s;
  filter: alpha(opacity=20s);
}

.project .overlay:hover h3 {
  opacity: 1;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

.project .overlay:hover p {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

.project .content {
  position: relative;
  opacity: 0;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  width: 100%;
  min-height: 165px;
  word-break: break;
  opacity: 0.5s;
  filter: alpha(opacity=50s);
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  -o-perspective: 300px;
  -ms-perspective: 300px;
  perspective: 300px;
}

.project h3 {
  opacity: 0;
  font-weight: 400;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
  -moz-transition: opacity 0.2s, -moz-transform 0.2s;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, transform 0.2s;
}

.project p {
  font-size: 1em;
  color: black;
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
  -moz-transition: background-color 0.5s, opacity 0.5s 0.15s, -moz-transform 0.5s 0.15s;
  -webkit-transition: background-color 0.5s, opacity 0.5s 0.15s, -webkit-transform 0.5s 0.15s;
  transition: background-color 0.5s, opacity 0.5s 0.15s, transform 0.5s 0.15s;
}

.label-danger {
  width: 400px;
}

<div class="section-3" id="portfolio">
  <h3>STUFFS I'VE WORKED ON</h3>
  <p>Stuffs i am able to do that define my strenght and weakness</p>
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 col-xxs-12">
      <div class="card-panel white filter-card">
        <ul>
          <li class="port_cat active-port" data-filter="all">ALL</li>
          <li class="port_cat" data-filter="website">WEBSITE</li>
          <li class="port_cat" data-filter="graphics">GRAPHICS</li>
          <li class="port_cat" data-filter="ui-design">UI DESIGN</li>
          <li class="port_cat" data-filter="application">APPLICATION</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="container portfolio-image-container">
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter website">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter application">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter ui-design">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter website">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter ui-design">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter graphics">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter graphics">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter website">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter graphics">
        <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="">
        <a href="" class="overlay">
          <div class="content">
            <h3>THIS IS A SAMPLE HEADING</h3>
            <P>Sample project description goes in here</P>
            <span class="label label-danger">Web Design</span>
          </div>
        </a>
      </div>
    </div>
  </div>
  <a class="waves-effect waves-light btn">View All Items</a>
</div>








<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

我认为 jQuery 可能是一个不错的方式: https://www.w3schools.com/jquery/eff_slidedown.asp

HTML:

<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

jQuery:

<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").slideUp();
    });
    $(".btn2").click(function(){
        $("p").slideDown();
    });
});
</script>