使用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>