Question

我需要开发一个新闻页面，其中有3篇文章可以通过2个按钮隐藏或逐个显示：“显示更多新闻”和“显示更少新闻” 从上一篇文章（在底部页面）到第一篇文章（页面顶部）开始，只需单击相关按钮一次，就必须隐藏/显示每篇文章。 HTML：

<!-- Articles-->
<article id="art-1" class="row" >My first Art</article>
<article id="art-2" class="row art" >My second Art</article>
<article id="art-3" class="row art" >My last Art</article>

<!--Buttons-->
<button class="button-grey" id="show-less-news1">Show Less</button>
<button class="button-grey" id="show-less-news2">Show Less</button>
<button class="button-grey" id="show-less-news3">Show Less</button>
<button class="button-grey" id="show-more-news1">Show More</button>
<button class="button-grey" id="show-more-news2">Show More</button>
<button class="button-grey" id="show-more-news3">Show More</button>

我设法用JQuery做了这个，但代码非常冗长，我需要6个按钮而不是2个，但我相信必须有一种更简单的方法来获得相同结果的复杂代码。这是JQuery代码：

$("#show-more-news1").css({display:'none'});
$("#show-more-news2").css({display:'none'});
$("#show-more-news3").css({display:'none'});
$("#show-less-news1").css({display:'none'});
$("#show-less-news2").css({display:'none'});
    //function 1 less
$("#show-less-news3").click(function(){
$("#art-3").hide(400);
$("#show-less-news3").hide();
$("#show-more-news3").show();
$("#show-less-news2").show();
});
    //function 2 less
$("#show-less-news2").click(function(){
$("#art-2").hide(400);
$("#show-less-news2").hide();
$("#show-more-news3").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
    //function 3 more
$("#show-more-news3").click(function(){
$("#art-3").show(400);
$("#show-more-news3").hide();
$("#show-less-news2").hide();
$("#show-less-news3").show();
});
    //function 3 less
$("#show-less-news1").click(function(){
$("#art-1").hide(400);
$("#show-less-news1").hide();
$("#show-more-news2").hide();
$("#show-more-news1").show();
});
    //function 2 more
$("#show-more-news2").click(function(){
$("#art-2").show(400);
$("#show-more-news2").hide();
$("#show-less-news1").hide();
$("#show-less-news2").show();
$("#show-more-news3").show();
});
    //function 1 more
$("#show-more-news1").click(function(){
$("#art-1").show(400);
$("#show-more-news1").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});

一些CSS：

  article {
  position: realtive;
  width: 100%;
  height: 50px;
  border: 1px solid red;
  float:left;
  background-color: yellow;
}
.button-grey {
  display: block;
  background-color: #cfcfcf;
  width: 150px;
  height: 30px;
  float:right;
}

这是一个CodePen。有人可以帮助我用更好的代码获得相同的结果吗？非常感谢！

Answer 1

我在这个jsfiddle中有更好的版本。

HTML：

<!-- Articles-->
<div id="articles">
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
</div>

<!--Buttons-->
<button class="button-grey" id="show-less">Show Less</button>
<button class="button-grey" id="show-more" style="display: none">Show More</button>

JS：

    var allArticles = $('#articles article');
var visibleCount = 3;

$('#show-less').on('click', function() {
    // no more articles to hide
    if (visibleCount == 0) return;
    // hide the previous one
    $(allArticles[--visibleCount]).hide();

    // Show the more button
    $('#show-more').show();
    // hide the less button
    if (visibleCount == 0)
        $('#show-less').hide();
});

$('#show-more').on('click', function() {
    if (visibleCount == allArticles.length) return;
    // show the next article
    $(allArticles[visibleCount++]).show();

    // Show the less button
    $('#show-less').show();
    // hide the more button
    if (visibleCount == allArticles.length)
        $('#show-more').hide();
});

Answer 2

仅使用两个按钮和相同的CSS来使用HTML 以下JS对我来说更好：

Javascript:


var newsDepth = 3;
var maxNewsDepth = 3;

$('#show-more-news').hide();


$('#show-more-news').click( function () {
  (newsDepth < maxNewsDepth ) && newsDepth++;
  $('#art-' + newsDepth).show();
  $('#show-less-news').show();
  if (newsDepth == maxNewsDepth) $('#show-more-news').hide();
});

$('#show-less-news').click( function () {
  ( newsDepth > 1 ) && newsDepth--;
  $('#art-' + (newsDepth + 1)).hide();
  $('#show-more-news').show();
   if (newsDepth == 1) $('#show-less-news').hide();
});

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Articles-->
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>

<!--Buttons-->
<button class="button-grey" id="show-less-news">Show Less</button>
<button class="button-grey" id="show-more-news">Show More</button>

这是codepen给你的

JQuery Show隐藏多个Div按钮

2 个答案: